将滚动添加到 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>

Answer 2

再举一个例子

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>