Prevent CSS3 Compression from Shredding Content

Question

I am trying to create a flexible layout in CSS3 with three drawers stacked on top of each other. The boxes are siblings and therefore have the same parent element. The height of the first window must match its contents. The height of the next two fields must grow to match their respective contents until they begin to overflow their parent. In this case, they should be compressed so that they do not overflow.

The problem is that I cannot figure out how to prevent crushing one of the cutting boxes if its contents are small in relation to the other cutting box. I want these boxes to shrink to a certain point where they will no longer shrink - let's say the equivalent of two lines of text, for example. Setting min-width not an option, because I do not want the fields to be higher than their contents if, for example, the content is only one line. If any of the cells reaches a point where it will no longer contract, and the parent cannot hold them without overflowing, the parent should get a scroll bar.

I do not know the content in advance, so the layout should be dynamic. I want to solve this only with CSS, if possible.

Here is an example of a problem when box3 is too small:

 p { margin: 0; } .container, .box { border: 1px solid black; } .box { background-color: white; margin: 1em; overflow: auto; } #container { background-color: yellow; display: flex; flex-direction: column; height: 15em; overflow: auto; } #box1 { flex: 0 0 auto; } #box2 { } #box3 { } 

 <div id="container" class="container"> <div id="box1" class="box"> <p>◼</p> </div> <div id="box2" class="box"> <p>◼◻◻◻◻◻◻◻◻◻◻◻◻◻◻◻◻◻</p> <p>◼◼◻◻◻◻◻◻◻◻◻◻◻◻◻◻◻◻</p> <p>◼◼◼◻◻◻◻◻◻◻◻◻◻◻◻◻◻◻</p> <p>◼◼◼◼◻◻◻◻◻◻◻◻◻◻◻◻◻◻</p> <p>◼◼◼◼◼◻◻◻◻◻◻◻◻◻◻◻◻◻</p> <p>◼◼◼◼◼◼◻◻◻◻◻◻◻◻◻◻◻◻</p> <p>◼◼◼◼◼◼◼◻◻◻◻◻◻◻◻◻◻◻</p> <p>◼◼◼◼◼◼◼◼◻◻◻◻◻◻◻◻◻◻</p> <p>◼◼◼◼◼◼◼◼◼◻◻◻◻◻◻◻◻◻</p> <p>◼◼◼◼◼◼◼◼◼◼◻◻◻◻◻◻◻◻</p> <p>◼◼◼◼◼◼◼◼◼◼◼◻◻◻◻◻◻◻</p> <p>◼◼◼◼◼◼◼◼◼◼◼◼◻◻◻◻◻◻</p> <p>◼◼◼◼◼◼◼◼◼◼◼◼◼◻◻◻◻◻</p> <p>◼◼◼◼◼◼◼◼◼◼◼◼◼◼◻◻◻◻</p> <p>◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◻◻◻</p> <p>◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◻◻</p> <p>◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◻</p> <p>◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼</p> </div> <div id="box3" class="box"> <p>◼◻◻</p> <p>◼◼◻</p> <p>◼◼◼</p> </div> </div> 

Answer 1

IF I understand your question correctly, the flex-shrink property should be what you are looking for.

Set # box1 to flex-shrink: 0

Set box2 field to flex-shrink: 1

Set field # 3 to flex-shrink: 1

Answer 2

I had a compressed gap in my flexible row, and flex-shrink: 0; fixed it beautifully - thanks to the defendant