Почему flexbox игнорирует мои настройки ширины? [дубликат] ⇐ CSS

[Anonymous]

У меня есть простая настройка, показанная ниже, но, несмотря на то, что ширина родительского div изображения справа установлена ​​​​равной 100 пикселей или, альтернативно, установлена ​​flex-basis равной 100 пикселей, flexbox сжимает div (и изображение внутри него) намного меньше 100 пикселей. Я понимаю, что есть способы установить ширину div ровно 100 пикселей - например. установите «flex: 1 0 100px» или установите «min-width: 100px» и «flex: 1 1 100px» в div, но я хочу знать, почему ширина не равна 100 пикселей в этом случае настройки не используются.
В целом различные комбинации свойств CSS иногда (для меня) приводят к непредсказуемым результатам. Например, если я установлю «min-width: 100px», но flex-basis будет изменен на значение по умолчанию «auto», размер div и изображения внутри вырастет до размера, превышающего 100 пикселей. Я хотел спросить, есть ли способ узнать, как именно вычисляются эти окончательные свойства - плагины для браузера или что-то подобное. Стандартные инструменты разработки в Chrome, конечно, не помогут, предоставив мне только те настройки CSS, которые я уже знаю, и окончательную вычисленную ширину, которая, кажется, берется из ниоткуда.

Код: Выделить всё

/* standard css reset*/

* {
margin: 0;
padding: 0;
cursor: default;
box-sizing: border-box;
}

img {
max-width: 100%;
max-height: 100%;
display: block;
}

/* actual settings */

#container {
background-color: yellow;
width: 100%;
height: max-content;
padding: 20px;
display: flex;
flex-direction: row;
justify-content: left;
align-items: center;
}

#text {
flex: 1 1 auto;
background-color: #94e02d;
}

#image-div {
flex: 1 1 auto;
/* min-width: 100px;*/
background-color: crimson;
width: 100px;
display: flex;
justify-content: center;
align-items: center;
}

#image {
background-color: cornflowerblue;
height: 100%;
width: auto;
object-fit: contain;
}

Код: Выделить всё

ajkasdlaksdalksdasdasdn alklkasdlakms ak mlakmalkm l kmalksdmlakmlk akdalksmdlak al kmlak masd

[img]https://i.sstatic.net/f51Nzoa6.png[/img]

Подробнее здесь: https://stackoverflow.com/questions/790 ... h-settings