How to create two flex containers, one growing its height with content, the other not?

Question

I'm Looking to create two containers besides each other, taking up the entire width (distributed through flex) and having the same height. The left one should grow its height with its content, the right one should always be exactly the same height as the left one, scrolling it's content when necessary.

The structure looks like this. Currently the right column grows the left column (and parent container), which shouldn't happen. Obviously max-height doesn't have any effect here, as the reference is the parent div. How can I make this work?

.container { 
  display: flex;
}
.col1 { 
  flex: 1;
  background: #999;
}
.col2 { 
  flex: 2;
  background: #F00;
  max-height: 100%; /* max-height should be height of left column */
  overflow: auto;
 }

<div class="container">
  <div class="col1">
    this<br>
    div<br>
    should<br>
    grow<br>
    based<br>
    on<br>
    content
   </div>
  <div class="col2">
    this<br>
    div<br>
    should<br>
    never<br>
    exceed<br>
    the height<br>
    defined by the left one<br>
    (which happens with this row)<br>
    it should scroll instead
   </div>
  </div>

score 1 · Accepted Answer · answered Feb 12 '20 at 10:57

That is because a flex-box will always be sized to its own inner content: in this case, what you want is to take all the content in .col2 out of the document flow, so that it does not influence the sizing of the entire flexbox.

To do this, you will need to wrap the contents of .col2 in a wrapper element that is absolutely positioned within .col2:

.container { 
  display: flex;
}
.col1 { 
  flex: 1;
  background: #999;
}
.col2 { 
  flex: 2;
  background: #F00;
  position: relative;
}
.col2 .wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  overflow: auto;
}

<div class="container">
  <div class="col1">
    this<br>
    div<br>
    should<br>
    grow<br>
    based<br>
    on<br>
    content
   </div>
  <div class="col2">
    <div class="wrapper">
    this<br>
    div<br>
    should<br>
    never<br>
    exceed<br>
    the height<br>
    defined by the left one<br>
    (which happens with this row)<br>
    it should scroll instead
    </div>
   </div>
  </div>

score 1 · Answer 2 · answered Feb 12 '20 at 11:04

edit : Another similar answer was posted before mine, i do not think that another method could be used here

You will need an extra wrapper to take the content off the flow. position:relative/absolute will work together to set the scroll bar when needed without being taken into account for the size of the main container.

Possible example:

.container {
  display: flex;
}

.col1 {
  flex: 1;
  background: #999;
}

.col2 {
  flex: 2;
  background: #F00;
  position: relative;
}

.col2>div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-height: 100%;
  /* max-height should be height of left column */
  overflow: auto;
}

<div class="container">
  <div class="col1">
    this<br> div
    <br> should
    <br> grow
    <br> based
    <br> on
    <br> content
  </div>
  <div class="col2">
    <div class="buffer">this<br> div
      <br> should
      <br> never
      <br> exceed
      <br> the height<br> defined by the left one<br> (which happens with this row)<br> it should scroll instead
    </div>
  </div>
</div>

How to create two flex containers, one growing its height with content, the other not?

2 Answers2