Eddy Eddy - 4 months ago 18
CSS Question

FLEXBOX: auto height for div to vertically fill out parent

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

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>

Comments