Split Space Of A Fixed Size Container Equally. A Case For Flexbox?

How can a HTML/CSS structure be designed, that splits a fixed size container horizontally into three parts. The first part should be as tall as it's content needs. The second and t

Solution 1:

Yes, you can use flex. Here's a little improvement for your code. Item1 doesn't need to have a flex rule and item2 and item3 will have flex: 1.

I also added the overflow-y: auto; rule to make it scrollable.

Example

#item1 {background-color: Bisque ; }
#item2 { flex: 1; background-color: DarkOrange ; overflow-y: auto;}
#item3 { flex: 1; background-color: MediumAquaMarine ; overflow-y: auto;}