html - 我需要内部元素上的滚动条，而不是浏览器窗口(视口(viewport))

在下面的代码中，如何使article容器自动增长以消耗其下面的剩余垂直空间，但滚动条仅保留用于该元素。

换句话说，我只希望文章内部滚动而不是整个浏览器窗口。

有纯CSS解决方案吗？还是我需要JavaScript来检测浏览器窗口的大小并动态调整文章的height属性？

html, body {
  //height: 100%;

}
#outer_container {
  display: flex;
  flex-direction: row;
}
#outer2 {
  flex: 1 0 auto;
}
#outer2 {
  flex: 1 0 auto;
}
#container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 50%;
  background-color: red;
}
#container header {
  background-color: gray;
}
#container article {
  flex: 1 1 auto;
  overflow-y: auto;
  height: 0px;
}
#container footer {
  background-color: gray;
}

<div id="outer_container">
  <div id="outer1">
    <h2>Outer 1</h2>
  </div>

  <section id="container">
    <header id="header">This is a header</header>
    <article id="content">
      This is the content that
      <br />With a lot of lines.
      <br />With a lot of lines.
      <br />This is the content that
      <br />With a lot of lines.
      <br />
      <br />This is the content that
      <br />With a lot of lines.
      <br />
      <br />This is the content that
      <br />With a lot of lines.
      <br />
    </article>
    <footer id="footer">This is a footer</footer>
  </section>


  <div id="outer2">
    <h2>Outer 2</h2>
  </div>
</div>

http://jsfiddle.net/ch7n6/907/

它最初是基于以下问题的答案：
Flexbox and vertical scroll in a full-height app using NEWER flexbox api

最佳答案

您可以尝试将position:fixed设置为外部容器（http://jsfiddle.net/ch7n6/909/）：

#outer_container{
display:flex;
flex-direction:row;
top:0;
bottom:0;
position:fixed;
}

如果它不适用于您的设计，则可以使用window.onresize事件更改容器尺寸。

关于html - 我需要内部元素上的滚动条，而不是浏览器窗口(视口(viewport))，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39441543/