I'm currently experimenting with Flexbox to design a basic two-column webpage that stretches across the entire width and height. The left column has a fixed width of 200px, while the right column uses up the rest of the space.
Here's what I have so far:
: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>
The width is behaving as expected, with the right column taking up all the remaining space after the 200px occupied by the left column. However, the columns are not filling the full height?
This question is unique because it involves the use of Flexbox