I have a simple set up as below but despite setting width of the parent div of the image on the right to be 100px, or alternatively setting flex-basis to be 100px, flexbox shrinks the div (and the image inside it) to a lot less than 100px. I get that there are ways to set the width of the div be exactly 100px - e.g. set "flex: 1 0 100px" or set "min-width: 100px" and"flex: 1 1 100px" on the div but I want to know why the width is not 100px in the case those settings are not used.
In general, different combinations of CSS properties seem to produce sometimes (to me) unpredictable results. For example, if I set "min-width: 100px" but flex-basis is changed to the default "auto" the div and the image within grow to way over 100px. I wanted to ask if there is a way to find out exactly how those final properties are computed - browser plugins or similar. The standard dev tools on Chrome for example are of course no help giving me only the css settings that I already know and the final computed width which seems to come from nowhere.
/* 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;}<div id="container"><p id="text">ajkasdlaksdalksdasdasdn alklkasdlakms ak mlakmalkm l kmalksdmlakmlk akdalksmdlak al kmlak masd </p><div id="image-div"><img id="image" src="https://i.sstatic.net/f51Nzoa6.png" /></div>