Flex container with 3 columns, 100% height, and fixed-width side columns - html

Question

I have a 3-column body with fixed width on the sides and the middle column filling the remaining width.
I need however to make all columns fill the entire height of the page.
I set the height of all parents to height: 100% and I don't want to use a workaround with huge margin or padding, as I'm using a scroll-bar.
#container {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
height: 100%;
}
.col-side {
width: 240px;
height: 100%;
}
#col1 {
border-right: 2px solid rgba(0, 0, 0, 0.12);
}
#col3 {
border-left: 2px solid rgba(0, 0, 0, 0.12);
}
<div id="container">
<div class="col-side" id="col1">
Left
</div>
<div class="col" id="col2">
Center
</div>
<div class="col-side" id="col3">
Right
</div>
</div>
Small demo can be found here:
https://jsfiddle.net/ysn3q6aL/#&togetherjs=H9pEenhcqQ

Answer 1

When you create a flex container (display: flex or display: inline-flex), it automatically applies flex-direction: row and align-items: stretch (among other initial settings).
These default settings line up flex items in a row and give them each the full height of the container. However, if you set a height on a flex item, it overrides align-items. So remove any heights you've set on the items.
This should work for you:
#container {
display: flex;
justify-content: space-between;
height: 100vh;
}
.col-side {
flex: 0 0 240px;
}
#col2 { flex: 1; }
#container > div + div {
border-left: 2px solid rgba(0, 0, 0, 0.12);
}
#col1 { background-color: lightgreen; }
#col2 { background-color: tomato; }
#col3 { background-color: aqua; }
body { margin: 0; }
<div id="container">
<div class="col-side" id="col1">Left</div>
<div class="col" id="col2">Center</div>
<div class="col-side" id="col3">Right</div>
</div>

Answer 2

.col-side{
width: 240px;
height: 100%;
flex: 1 1 0;
}
might help. I was asking the same some time before, the flex: 1 1 0 part helped.
the defaults are 0 1 auto. The first param is flex grow, so you want them all to grow to the same height.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-13

Answer 3

Set the container height to 100vh.
That's all
#container{
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
height:100vh;
}
.col-side{
width: 240px;
height: 100%;
}
#col1{
border-right: 2px solid rgba(0, 0, 0, 0.12);
}
#col3{
border-left: 2px solid rgba(0, 0, 0, 0.12);
}