html - 将滚动添加到 Flexbox 内的 div

Question

我试图有一个滚动的 div，它包含在展开以填充页面的 Flex 元素中。目前，它只是溢出了容器。

我查看了以下问题:Scrolling a flexbox with overflowing content没有运气

在我的代码中，应该滚动并包含在浅蓝色 div 中的蓝色内容 div 溢出并溢出。

这是我当前的结构:

.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>

这是 codepen http://codepen.io/anon/pen/qNryJZ?editors=1100 上的一个示例

Answer 1

请参阅下面的代码，已在 IE 11 和 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>