CSS Flexbox full height columns

Question

I am trying to use Flexbox to create a simple two column webpage that occupies the full width and height. The left column is a fixed width of 200px while the right column in takes up the remaining space.

So far I have:

:root {
  overflow-x: hidden;
  height: 100%;
}

body {
  min-height: 100%
}

.flexbox {
  height: 100%;
  display: flex;
}

.left {
  flex: 0 0 200px;
  height: 100%
}

.right {
  flex: 1
}

and:

<div class="flexbox">
  <div class="left">
    Left
  </div>
  <div class="right">
    Right
  </div>
</div>

Width is working as expected with right occupying all the remaining space other than the 200px that left takes up. However, they are not full height?

This is not a duplicate as it uses Flexbox

Of course it is a duplicate, which mean _this question already has an answer_, and even Flexbox need a height for its outer most _flex container_, and since you use percent for its height, that percent value is based on its parent, which in this case is the `body`. — Asons, Oct 16 '17 at 12:18

score 2 · Answer 1 · answered Oct 16 '17 at 10:29

2

Try using viewport height. This will make the divs the full height of the viewport.

.flexbox {
  height: 100vh;
  display: flex;
}

answered Oct 16 '17 at 10:29

cnrhgn

703
4
18

CSS Flexbox full height columns

1 Answers1