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

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