Add scroll to div inside flexbox

Question

I'm trying to have a div that scrolls which is contained within a flex element that's expanded to fill the page. Currently, it just overflows its container.

I've taken a look at questions such as: Scrolling a flexbox with overflowing content with no luck

In my code, the blue content div which should scroll and be contained to the lightblue div overflows and spills over.

This is my current structure:

.base {
  background: lightblue;
  display: flex;
  flex-flow: column;
  height: 100vh;
  padding: 0 20px;
}

.column {
  display: flex;
  flex-flow: column;
  flex: 1 0 auto;
  background: lightgreen;
  /*   overflow: hidden; */
}

.instructions {
  background: red;
  display: flex;
  flex-flow: column;
}

.header {
  background: teal;
}

.content {
  background: blue;
  overflow: scroll;
}

<div class='base'>
  <div class='column'>
    <div class='instructions'>
      <div class='header'>this is the header</div>
      <div class='content'>
        <p>This is content</p>
        <p>This is a lot of content</p>
        <p>This is content</p>
        <p>This is a lot of content</p>
        <p>This is content</p>
        <p>This is a lot of content</p>
        <p>This is content</p>
        <p>This is a lot of content</p>
        <p>This is content</p>
        <p>This is a lot of content</p>
        <p>This is content</p>
        <p>This is a lot of content</p>
        <p>This is content</p>
        <p>This is a lot of content</p>
        <p>This is content</p>
        <p>This is a lot of content</p>
        <p>This is content</p>
        <p>This is a lot of content</p>
        <p>This is content</p>
        <p>This is a lot of content</p>
        <p>This is content</p>
        <p>This is a lot of content</p>
        <p>This is content</p>
        <p>This is a lot of content</p>
        <p>This is content</p>
        <p>This is a lot of content</p>
        <p>This is content</p>
        <p>This is a lot of content</p>
        <p>This is content</p>
        <p>This is a lot of content</p>
        <p>This is content</p>
        <p>This is a lot of content</p>
        <p>This is content</p>
        <p>This is a lot of content</p>
      </div>
    </div>
  </div>
</div>

and here's an example on codepen http://codepen.io/anon/pen/qNryJZ?editors=1100

score 2 · Answer 1 · answered Jun 29 '16 at 06:22

Kindly see code below, tested in IE 11 and Chrome.

.base {
  display: -webkit-flex; /* Safari */
  display: flex;
  background: lightblue;
  padding: 0 20px;
  height: 100vh;
}

.column {
  display: -webkit-flex; /* Safari */
  display: flex;
  background: lightgreen;
  flex-flow: column;
  flex: 1 0 auto;
}

.instructions {
  background: red;
  display: -webkit-flex; /* Safari */
  display: flex;
  flex-flow: column;
  flex: 1;
}

.header {
  background: teal;
}

.content {
  -webkit-flex: 1;
  -ms-flex: 1;
  background: blue;
  overflow-y: scroll;
  flex-flow: column;
}

<div class='base'>
  <div class='column'>
    <div class='instructions'>
      <div class='header'>this is the header</div>
      <div class='content'>
        <p>This is content</p>
        <p>This is a lot of content</p>
        <p>This is content</p>
        <p>This is a lot of content</p>
        <p>This is content</p>
        <p>This is a lot of content</p>
        <p>This is content</p>
        <p>This is a lot of content</p>
        <p>This is content</p>
        <p>This is a lot of content</p>
        <p>This is content</p>
        <p>This is a lot of content</p>
        <p>This is content</p>
        <p>This is a lot of content</p>
        <p>This is content</p>
        <p>This is a lot of content</p>
        <p>This is content</p>
        <p>This is a lot of content</p>
        <p>This is content</p>
        <p>This is a lot of content</p>
        <p>This is content</p>
        <p>This is a lot of content</p>
        <p>This is content</p>
        <p>This is a lot of content</p>
        <p>This is content</p>
        <p>This is a lot of content</p>
        <p>This is content</p>
        <p>This is a lot of content</p>
        <p>This is content</p>
        <p>This is a lot of content</p>
        <p>This is content</p>
        <p>This is a lot of content</p>
        <p>This is content</p>
        <p>This is a lot of content</p>
      </div>
    </div>
  </div>
</div>

It's not in your original code as well, should add `display: -moz-flex;` for firefox. — denchu, Jun 30 '16 at 01:14

score 0 · Answer 2 · answered Jun 29 '16 at 12:23

one more example

html,
body {
  height: 100%;
}
#wrapper {
  height: 100%;
  display: table;
  width: 700px;
}
#header {
  display: table-row;
  height: 30px;
}
#right-col {
  display: inline-block;
  width: 320px;
  height: 100%;
  max-height: 100%;
  margin-right: 20px;
  border: 2px black solid;
  vertical-align: top;
  overflow: hidden;
}
#inner-right {
  height: 300px;
  max-height: 300px;
  overflow-y: scroll;
  background: ivory;
}

<div id="wrapper">
  <div id="header">Header</div>
  <div id="body">
    <div id="right-col">
      <div id="header-text">Header</div>
      <div id="inner-right">
        <p>
          Accesory 1
          <br>Accesory 2
          <br>Accesory 3
          <br>Accesory 4
          <br>Accesory 5
          <br>Accesory 6
          <br>Accesory 7
          <br>Accesory 8 Accesory 1
          <br>Accesory 2
          <br>Accesory 3
          <br>Accesory 4
          <br>Accesory 5
          <br>Accesory 6
          <br>Accesory 7
          <br>Accesory 8 Accesory 5
          <br>Accesory 6
          <br>Accesory 7
          <br>Accesory 8
        </p>
      </div>
    </div>
  </div>
</div>

Add scroll to div inside flexbox

2 Answers2