Within a div, I have two child div elements. The parent container utilizes a flexbox layout, with preset maximum widths for the children as shown below:
<div class="wrap">
<div class="one">Hi</div>
<div class="two">my second div</div>
</div>
Accompanied by the SCSS code:
.wrap {
display:flex;
.one{
max-width:100px;
}
.two {
max-width: 50px;
}
}
Initially, I assumed that resizing the .wrap container would proportionally shrink both children by equal amounts (e.g., -50px each). However, this turned out not to be the case.
I then speculated whether the behavior was determined by the highest or lowest assigned maximum width, but this hypothesis was debunked.
Upon observation, it became apparent that one of the child elements consistently shrinks significantly before adjustments are made to the other. What factors dictate this behavior exactly? My inquiry revolves around what influences which child reaches its maximum limit first? I conducted an experiment by removing the flex attribute, and the outcome remained unchanged, leading me to believe that the issue is solely related to the max-width property.