Flexbox row inside flexbox column

Question

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

dippas · Accepted Answer · 2016-05-21T18:00:55.613

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>

UPDATE

In Chrome and Safari, the height of (non flex) children are not recognized in percentages. However Firefox and IE recognize and scale the children based on percentage heights.

Source

So a workaround for that is adding .position:relative to .main and position:absolute, width/height:100% to .flexbox-row

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;
  position: relative
}
.flexbox .header,
.flexbox .footer {
  background: green;
  padding: 1em
}
.flexbox-row {
  display: flex;
  position:absolute;
  height: 100%;
  width: 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>

I just tested it in chrome, and does not work right, FF and Edge is ok. Maybe webkit needs additional properties. — Alko, May 21 '16 at 17:14
@Alko it is a known Issue - *In Chrome and Safari, the height of (non flex) children are not recognized in percentages. However Firefox and IE recognize and scale the children based on percentage heights. [Chrome bug](http://crbug.com/341310)* - so you might use `vh` — dippas, May 21 '16 at 17:18
possibly related: [Percentage Heights in Flexbox: Chrome/Safari vs Firefox/IE](http://stackoverflow.com/a/35537510/3597276) — Michael Benjamin, May 21 '16 at 17:22
Thanks I did not know that. I might have to find another workaround. I have accepted your answer. — Alko, May 21 '16 at 17:29
@Alko solution would be to add `position: relative;` to `.main`, and `position: absolute;width: 100%;height:100%;` to `.flexbox-row` — Bogdan Kuštan, May 21 '16 at 17:50

Flexbox row inside flexbox column

1 Answers1