CSS nested flex box height

Question

I have a row layout with a nested flex container in the second flex item of the root container. I want the nested flex container to be 100% of the used height of its parent.

<div class="steps root"><!--root container-->
<div class="step one">
    I am very tall. Others should be as high as I am!
</div>
<div class="step two-and-three">
    <div class="steps"><!--nested container-->
        <div class="step two">
            nested child 1. should have 100% vertical height
        </div>
         <div class="step three">
             nested child 2. should have 100% vertical height
        </div>
    </div>
</div>

Here is the fiddle demonstrating the issue: http://jsfiddle.net/2ZDuE/316/

If I set an explicit height to my nested flex container, then everything works.

How to tell the nested container to automatically fill up vertical space of its container?

do you not need to set your height against the "steps root" class? is this what you mean: jsfiddle.net/2ZDuE/318 ?? — 97ldave

Vitorino fernandes Vitorino fernandes · Accepted Answer · 2014-12-22T17:06:48

add display:flex to .step.two-and-three and remove padding-bottom

.steps.root {
  width: 700px;
}
.steps.root>.step.one {
  height: 300px;
  /*simulate big content in left column*/
}
.steps {
  display: flex;
}
.step.one {
  flex: 1 1 33%;
  background-color: rgba(0, 0, 0, 0.1);
}
.step.two-and-three {
  flex: 2 1 66%;
  background-color: grey;
  display: flex; /* added */
}
.step.two {
  flex: 1 1 50%;
  background-color: green;
}
.step.three {
  flex: 1 1 50%;
  background-color: lime;
}
.step.two-and-three>.steps {
  background-color: olive;
  padding-bottom: 10px;
}

<div class="steps root">
  <!--root container-->
  <div class="step one">I am very tall. Others should be as high as I am!</div>
  <div class="step two-and-three">
    <div class="steps">
      <!--nested container-->
      <div class="step two">nested child 1. should have 100% vertical height</div>
      <div class="step three">nested child 2. should have 100% vertical height</div>
    </div>
  </div>
</div>

CSS nested flex box height

1 Answers