riogrande riogrande - 3 months ago 28
CSS Question

flexbox fill remaining window height not working

I'm trying to make a layout with flexbox that will have two rows.

Neither of the rows will have fixed heights.

The first row is smaller and contains a logo.

The second row has two columns which must fill the remaining height of the screen.

Is this even possible with flexbox?



* {
box-sizing: border-box;
}
body,
html {
width: 100%;
height: 100%;
}
.header {
width: 100%;
padding: 1.85185vh 4.16667vw;
border-bottom: 1px solid #e9e9e9;
position: relative;
z-index: 1;
height: 9vmin;
}
.header .right {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
right: 4.16667vw;
color: #191919;
font-size: 3.5vmin;
font-weight: 300;
}
.header img {
height: 100%;
}
.main-wrapper {
height: 100%;
width: 100%;
}
.columns-wrapper {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.column-left,
.column-right {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.column-left {
background: red;
}
.column-right {
background: yellow;
}

<div class="main-wrapper">

<header class="header" role="banner">
<img src="http://img.logospectrum.com/dec/dummy-logo.jpg" alt="Logo">
<div class="right">
aaaaa
</div>
</header>

<div class="columns-wrapper">
<div class="column-left">
<div class="column-inner">

</div>
</div>
<div class="column-right">bbb</div>
</div>

</div>





Demo: http://codepen.io/riogrande/pen/RGboox

Answer

Make the .main-wrapper a flex container in column-direction.

This will stack the children (header and .columns-wrapper) in two rows.

For .columns-wrapper to consume all remaining space in the container, apply flex: 1.

revised codepen (CSS compiled)

* {
  box-sizing: border-box;
}
body,
html {
  width: 100%;
  height: 100%;
}
.header {
  width: 100%;
  padding: 1.85185vh 4.16667vw;
  border-bottom: 1px solid #e9e9e9;
  position: relative;
  z-index: 1;
  height: 9vmin;
}
.header .right {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 4.16667vw;
  color: #191919;
  font-size: 3.5vmin;
  font-weight: 300;
}
.header img {
  height: 100%;
}
.main-wrapper {
  height: 100%;
  width: 100%;
  display: flex;              /* NEW */
  flex-direction: column;     /* NEW */
}
.columns-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex: 1;                   /* NEW */
}
.column-left,
.column-right {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.column-left {
  background: red;
}
.column-right {
  background: yellow;
}
<div class="main-wrapper">

  <header class="header" role="banner">
    <img src="http://img.logospectrum.com/dec/dummy-logo.jpg" alt="Logo">
    <div class="right">
      aaaaa
    </div>
  </header>

  <div class="columns-wrapper">
    <div class="column-left">
      <div class="column-inner">

      </div>
    </div>
    <div class="column-right">bbb</div>
  </div>

</div>