need help for splitted sidebar with 3 different list-heights

Question

I'm creating a sidebar which contains a searchfield and 3 lists of items.

The first list should take 50% height if needed
The second and third list should split the height to 25% / 25%, but when the second or third list is empty, the other one should take as much space as available (so max is 50% - headline of the empty list)
if a list is bigger then the available height, it should add a scrollbar.

Over the three lists is a small searchfield which size is 7vh.

right now im trying it in the following way:

This doesn't work so far. And I think using magic numbers (100vh, 7vh...) is bad for responsibility.

Does anyone know a good solution for this?

user_11941549 · Answer

I strongly suggest using flex for stuff like this. Its very flexible and at this point state of the art. Here you can get a few great examples on how to use it.

Focus on the flex, flex-direction and display: flex styles. The flex property pretty much lets you define the size and weather a element should be able to shrink or grow. For the 2 lists at the bottom you can use flex: 1 1 auto to allow scaling depending on the required space by the element.

I recommend you only render the bottom list into the dom if length > 0 so that the other list can scale to its max height.

need help for splitted sidebar with 3 different list-heights

1 Answers