How to get a scrollable full-height div within a flex box?

Question

I would like to create a scrollable content div (#left) while keeping all other elements (#header, #right) in place. If I give #left a fixed height it behaves as desired, but I want it to fill up the whole viewport and don't know any heights beforehand.

html, body{
    height:100%;
    margin:0;
    padding:0;
}

#main {
  display: flex;
  height: 100%;
  flex-direction: column;
}

#header {
  background-color: blue;
}

#content {
  flex: 1;
  background-color: red;
}

#inner {
  display: flex;
  height: 100%;
  background-color: yellow;
}

#left {
  flex: 1;
  height: 100%;
  overflow: auto;
  background-color: pink;
}

#right {
  flex: 1;
  height: 100%;
  background-color: green;
}

<div id="main">
  <div id="header">
    Heyheyhey<br/>
    Yo<br/>
  </div>
  <div id="content">
    <div id="inner">
      <div id="left">
Only this pane should scroll.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus lorem. Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum ac tellus suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique, tellus lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan bibendum magna dignissim ac.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus lorem. Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum ac tellus suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique, tellus lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan bibendum magna dignissim ac.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus lorem. Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum ac tellus suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique, tellus lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan bibendum magna dignissim ac.
      </div>
      <div id="right">
        Yo
      </div>
    </div>
  </div>

</div>

Thanks!

`height: 100vh` should cover the entire viewport. Demo - https://jsfiddle.net/ce5wn1qm/4/ — Nilesh Naik, Jun 25 '18 at 10:56
Thanks for your comment! unfortunately that adds overflow because of the header, try scrolling the right panel — Wilco, Jun 25 '18 at 10:59
I don't know the header height up front, because of some mediaqueries and it depends on the contents of the header. — Wilco, Jun 25 '18 at 11:31
Without knowing the height of the header you will need JS I believe. Flexbox can't do that. — Paulie_D, Jun 25 '18 at 11:34
Flexbox can do it, see my [answer](https://stackoverflow.com/questions/51021759/how-to-get-a-scrollable-full-height-div-within-a-flex-box/51022816#51022816) below. — Andrzej Ziółek, Jun 25 '18 at 12:32

Andrzej Ziółek · Answer 1 · 2018-06-25T12:38:02.783

I believe below approach solves your issue. Pure CSS. display: flex in display: block.

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main {
  display: flex;
  height: 100%;
  flex-direction: column;
}

#header {
  background-color: blue;
}

#content {
  display: flex;
  background-color: red;
  overflow: hidden;
}

#inner {
  display: block;
  background-color: yellow;
}

#inner2 {
  display: flex;
  height: 100%;
}

#left {
  width: 50%;
  background-color: pink;
  overflow: auto;
}

#right {
  width: 50%;
  background-color: green;
}

<div id="main">
  <div id="header">
    Heyheyhey<br/> Yo
    <br/>
  </div>
  <div id="content">
    <div id="inner">
      <div id="inner2">
        <div id="left">
          Only this pane should scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus lorem.
          Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum ac tellus
          suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique,
          tellus lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan
          bibendum magna dignissim ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus
          lorem. Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum
          ac tellus suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique,
          tellus lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan
          bibendum magna dignissim ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus
          lorem. Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum
          ac tellus suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique,
          tellus lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan
          bibendum magna dignissim ac.
        </div>
        <div id="right">
          Yo
        </div>
      </div>
    </div>
  </div>
</div>

Cool! It's exactly what I want. Unfortunately I can't get this to work in firefox, any ideas? Thanks a lot! — Wilco, Jun 25 '18 at 12:14
I have updated my snippet, it works for me on Firefox just fine, thank you for letting me know. Don't hesitate to write if there is anything else. — Andrzej Ziółek, Jun 25 '18 at 12:20

score 1 · Accepted Answer · answered Jun 25 '18 at 17:16

Just use flex properties all the way through.

You don't need display: block.

You don't need calc().

You don't even need percentage heights.

#main {
  display: flex;
  flex-direction: column;
  height: 100vh;  
}
#header {
  background-color: aqua;
}
#content {
  flex: 1;
  background-color: red;
  display: flex;
  min-height: 0; /* for Firefox and Edge; see note below */
}
#inner {
  display: flex;
  background-color: yellow;
}
#left {
  flex: 1;
  overflow: auto;
  background-color: pink;
}
#right {
  flex: 1;
  background-color: lightgreen;
}
body {
  margin: 0;
}

<div id="main">
  <div id="header">
    Heyheyhey<br/> Yo
    <br/>
  </div>
  <div id="content">
    <div id="inner">
      <div id="left">
        Only this pane should scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus lorem.
        Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum ac tellus
        suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique, tellus
        lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan bibendum
        magna dignissim ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus lorem.
        Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum ac tellus
        suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique, tellus
        lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan bibendum
        magna dignissim ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus lorem.
        Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum ac tellus
        suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique, tellus
        lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan bibendum
        magna dignissim ac.
      </div>
      <div id="right">
        Yo
      </div>
    </div>
  </div>

</div>

Note: For this layout to adhere to the flexbox specification, and work in Firefox and Edge, you need to override the min-height: auto default on flex items. Chrome provides a built-in override. A full explanation is here: Why don't flex items shrink past content size?

Awesome! This helps massively as behaviour of child containers is more predictable now. Thanks! — Wilco, Jun 26 '18 at 15:40

How to get a scrollable full-height div within a flex box?

2 Answers2