I have the following html layout, where I want to give a fixed width to the first and third divs, while making the second div take the remaining width.
Normally, this can be achieved by giving flex: 1 to the second div, however, if this div has a big content, it will make it grow further, and shrink the "fixed" width of the first and third containers.
<div class="container"><div class="child-small"></div><div class="child-big">TTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT</div><div class="child-small"></div></div><style> .container { display: flex; border: 1px solid red; border-radius: 10px; } .child-small { height: 100%; width: 150px; outline: 1px solid green; } .child-big { flex: 1; outline: 1px solid blue; }</style>I was expecting the first and the third containers to always respect their fixed width, i.e., was expecting the second div to not expand horizontally, but rather vertically.