Testing 100vh and flexbox

index.html

<div class="fullscreen">
  <div class="top">top</div>
  <div class="middle">
    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>
  </div>
  <div class="bottom">bottom</div>
</div>

style.css

/*
* IE11 unnecessarily adds a vertical scrollbar. (Somehow there's an extra pixel vertically.)

* IE11 overlaps the middle and bottom parts once you nest two flexbox containers and you don't explicitly move them apart by setting a height. (comment out height: 100vh to see top and bottom get displayed on top of each other)

* If you specify a min-height on the outer container, IE11 does mostly the same thing.
*/
html,
body {
  min-height: 100%;
}
.fullscreen {
  height: 100vh;
  background-color: #ccc;
  display: flex;
  flex-direction: column;
}
.top, .middle, .bottom {
  background-color: #aaa;
  width: 100%;
  text-align: center;
}
.middle {
  flex: 1;
  display: flex;
  margin: 10px 0;
}
.center {
  flex: 1;
}

Testing 100vh and flexbox.markdown

Testing 100vh and flexbox

A Pen by Le Roux Bodenstein on CodePen.

License.