FLEXBOX: auto height for div to vertically fill out parent

Question

I have some Flexbox markup that requires some attention.

All is working as intended, except for one last thing. I have some divs in column layout, of which two are height controlled by content or height setting, and one is not controlled. This last one which is not height controlled (color yellow in the DEMO), should take on such height so to fill out the remaining vertical space in its parent div (green).

Even when the window is scaled with this responsive design, the yellow div should always fill out to the bottom of the green parent div.

<div class="flexbox">
  <div class="col">
    <h3>RED</h3>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>

  </div>

  <div class="col">
    <div class="flexbox2">
      <div>
        <h3>GREEN</h3></div>
      <div class="col1">
        Set at responsive height 10 vw.
      </div>
      <div class="col1">
        This div should adapt its height automatically to fill out the remaining space.
      </div>

    </div>

  </div>

<style>
.flexbox {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

.flexbox .col {
  flex: 1;
}

.flexbox .col:nth-child(1) {
  background: red;
  order: 0;
  padding: 5px;
}

.flexbox .col:nth-child(2) {
  background: green;
  order: 1;
  padding: 5px;
  color: white;
}

.flexbox2 {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 5px;
}

.flexbox2 .col1 {
  flex: 1;
}

.flexbox2 .col1:nth-child(2) {
  background: orange;
  height: 10vw;
  padding: 5px;
}

.flexbox2 .col1:nth-child(3) {
  background: yellow;
  padding: 5px;
  color: black;
}

</style>

Answer 1

The column layout won't stretch down if it's not inside another flex layout.

Consider these changes:

.flexbox .col:nth-child(2) {
  display: flex;
  ...
}

.flexbox2 .col1 {
  flex: none;  /* Or omit this style altogether. */
}

.flexbox2 .col1:nth-child(3) {
  flex: 1
  ...
}

It seems you could avoid that first style change by simplifying the mark-up to collapse the .flexbox2 element into its parent .col element (e.g. <div class="col flexbox2">).

.flexbox {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

.flexbox .col {
  flex: 1;
}

.flexbox .col:nth-child(1) {
  background: red;
  order: 0;
  padding: 5px;
}

.flexbox .col:nth-child(2) {
  background: green;
  order: 1;
  padding: 5px;
  color: white;
  display: flex;
}

.flexbox2 {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 5px;
}

.flexbox2 .col1 {
  flex: none;
}

.flexbox2 .col1:nth-child(2) {
  background: orange;
  height: 10vw;
  padding: 5px;
}

.flexbox2 .col1:nth-child(3) {
  background: yellow;
  padding: 5px;
  color: black;
  flex: 1
}

<div class="flexbox">
  <div class="col">
    <h3>RED</h3>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>

  </div>

  <div class="col">
    <div class="flexbox2">
      <div>
        <h3>GREEN</h3></div>
      <div class="col1">
        Set at responsive height 10 vw.
      </div>
      <div class="col1">
        This div should adapt its height automatically to fill out the remaining space.
      </div>

    </div>

  </div>

Answer 2

Make the grandparent of the yellow div a flex container, so that align-items: stretch goes into effect, which causes the flex items (including the parent of the yellow div) to expand the full height of the container.

.col:nth-child(2) { display: flex; }

The yellow div was already filling the remaining space (of its container). It was the parent (.flexbox2) that was limited in height (within its container).

If you want the orange div to be fixed at height: 10vw, you'll need to remove the flex: 1 applied.