Flex Container With 3 Columns, 100% Height, And Fixed-width Side Columns

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

Solution 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>

Solution 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

Solution 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); 
}