Space management inside nested flexboxes

user_7629331 0
Viewed 49

I'm having issues with space management in nested flex columns.

Here is my example. I have a column with fixed height, and two children: one with fixed height, the other one filling available space with "flex: 1 1 auto". So far so good, it works. But now, this second child becomes another flex column, with two children. Same idea: one child has fixed height, the other one is supposed to fill available space. Doesn't work! Here is the code:

<div class="parent">
  <div class="title"></div>
  <div class="list">
    <div class="fixed-child"></div>
    <div class="resized-child"></div>
  </div>
</div>

.parent {
  height: 300px;
  width: 200px;
  display: flex;
  flex-direction: column;
  border: 2px solid black;
}

.title {
  height: 50px;
  flex: 0 0 auto;
  background-color: green;
}

.list {
  flex: 1 1 auto;
  background-color: red;
  border: 2px solid red;
}

.fixed-child {
  height: 50px;
  flex: 0 0 auto;
  background-color: blue;
}

.resized-child {
  flex: 1 1 auto;
  background-color: yellow;
  border-color: 1px solid yellow;
}

What I need VS what i'm getting:

enter image description here

Here's a fiddle for you to experiment: https://jsfiddle.net/rkyzvn36/

Before you ask, I cannot put my 3 elements (green, blue and yellow) in a unique column: the red column is a component. Is there a solution to my problem, some flex behavior I don't know about? Thanks.

flexbox css
1 Answers

.resized-child element is not displayed because its height is zero and the reason is that it is not a flex item, so flex property, that you have set on it, has no effect on it.

.parent is a flex container and only its direct children are flex items. .list is not a flex container, its a flex item. To make .resized-child a flex item, you need to make .list a flex container.

Following change will fix the problem:

.list {
  ...
  display: flex;
  flex-direction: column;
}
user_60943480
Related