Почему ширина встроенного гибкого контейнера меньше, чем его содержание? ⇐ CSS

[Anonymous]

У меня есть обертка и два контейнера Flexbox с некоторыми Divs, которые имеют некоторый текст. Растет. < /p>
Второй контейнер ведет себя так, как и ожидалось. Но первый ... Я не могу понять. Все хорошо. Но он не протекает весь путь для размещения для всего контента, который там есть. По какой -то причине он внезапно останавливается в, казалось бы, случайной точке. Я ожидаю, что это либо охватит всех своих детей, и полностью вытекает, либо будет только долго, если бы родительская обертка разрешает. Делать обертку более решает эту проблему. Заявление у детей есть гибкий базис: 0; решает эту проблему. Я также заметил, что причина, по которой она останавливается, прежде чем он полностью оборачивается вокруг всех детей, не должна быть случайной. Это до сих пор зависит от того, насколько содержание у детей, но кажется, хотя он использует лишь часть ширины детей для расчета своей собственной ширины. < /P>
Я полностью потерян здесь. Я не знаю, почему это проблема в первую очередь. Контейнер отлично работает и ожидается, когда обертка шире, чем есть, но он начинает становиться странным, когда обертка тоньше, чем контейнер. Это просто переполнение, почему это не работает, как и ожидалось?.wrapper {
background-color: black;
padding: 8px;
width: 100px;

box-sizing: border-box;
}

#container {
display: inline-flex;
gap: 4px;

background-color: #ddd;

padding: 8px;
}

#container > * {
flex: 0 0 auto;
align-self: start;

box-sizing: border-box;
padding: 4px;

background-color: #eee;
width: auto;
}

#container2 {
display: flex;
gap: 4px;

background-color: #ddd;

padding: 8px;
}

#container2 > * {
flex: 0 0 auto;

box-sizing: border-box;
padding: 4px;

background-color: #eee;
width: 60px;
}< /code>


div A
div B
div C
div D - more content


div A
div B
div C
div D - more content

< /code>
< /div>
< /div>
< /p>
Пожалуйста, объясните. Я теряю здравомыслие из -за этого.
2 контейнеры Flexbox

Подробнее здесь: https://stackoverflow.com/questions/796 ... ts-content