Alko Alko - 6 months ago 15
HTML Question

Flexbox row inside flexbox column

I have a layout like this:

<div class="flexbox">
<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>
</div>


and css for it:

html,
body {
height: 100%;
}
.flexbox {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: stretch;
align-items: flex-start;
height: 100%;
width: 100%;
}
.flexbox .main {
order: 0;
flex: 1 1 auto;
align-self: stretch;
}
.flexbox .header,
.flexbox .footer {
order: 0;
flex: 0 1 auto;
align-self: stretch;
}


in the above
.main
column is stretched 100%
height
, all this works perfect, now adding
.flexbox-row
inside
.main
:

<div class="flexbox">
<div class="header"></div>
<div class="main">
<div class="flexbox-row">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
</div>
<div class="footer"></div>
</div>


and css:

.flexbox-row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: stretch;
align-items: flex-start;
}
.flexbox-row .first,
.flexbox-row .second,
.flexbox-row .third {
order: 0;
flex: 0 1 auto;
align-self: stretch;
}
.flexbox-row .second {
order: 0;
flex: 1 1 auto;
align-self: stretch;
}


but for some reason
.main
column the second one does not stretch 100% in
height
anymore.

Here is jsbin demo

Answer

Add height:100% to .flexbox-row

I've simplified your rules, there were unnecessary properties there.

html,
body {
  height: 100%;
  margin: 0
}
.flexbox {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 100%;
  width: 100%;
}
.flexbox .main {
  flex: 1;
  background: red
}
.flexbox .header,
.flexbox .footer {
  background: green;
  padding:1em
}
.flexbox-row {
  display: flex;
  height: 100%;
}
.flexbox-row .first,
.flexbox-row .second,
.flexbox-row .third {
  background: #C9E1F4;
  padding: 1em;
}
.flexbox-row .second {
  flex: 1;
  background: #A8EDAC
}
<div class="flexbox">
  <div class="header">Header</div>
  <div class="main">
    <div class="flexbox-row">
      <div class="first">First</div>
      <div class="second">Main</div>
      <div class="third">Third</div>
    </div>
  </div>
  <div class="footer">Footer</div>
</div>

Comments