在flexbox中添加滚动到div

Question

我试图让一个滚动的div包含在一个flex元素中，该元素已扩展为填充页面。目前，它只是溢出了它的容器。

我已经看过如下问题：Scrolling a flexbox with overflowing content没有运气

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

这是我目前的结构：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这里是codepen http://codepen.io/anon/pen/qNryJZ?editors=1100

的一个例子

Answer 1

请参阅下面的代码，在IE 11和Chrome中进行测试。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

又一个例子

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;