CODEWITHSUNDEEP
htmlcssflexbox
Alko
Alko

Reputation: 1439

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

Upvotes: 10

Views: 21579

Answers (1)

dippas
dippas

Reputation: 60563

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>

Upvotes: 15

Related Questions