Scrolling div inside flexbox

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

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

As you can see the blue content div which should scroll and be contained to the lightblue div overflows and spills over.

درباره سایت

آخرین مطالب

امکانات وب

Scrolling div inside flexbox

Vote count: 0

صفحه بندی

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه