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

Question

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

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

是否有一个纯css的解决方案?或者我需要javascript来检测浏览器窗口的大小，并动态调整文章的高度属性?

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 api在全高应用程序中伸缩和垂直滚动

Answer 1

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

)

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

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

Answer 2

在你的代码中你注释掉了:

html, body {
  //height: 100%;    
}

但是我认为你的方向是对的。

通过取消注释规则，并将height: 100%添加到.outer_container，您的布局可能是完整的。

试试这个:

html, body {
  height: 100%;                   /* uncommented */
  margin: 0;                      /* removes default margin */
}
#outer_container {
  height: 100%;                   /* new; see details below */
  display: flex;
  flex-direction: row;
}
#outer2 {
  flex: 1 0 auto;
  background-color: lightblue;     /* just for demo */
}
#outer1 {                          /* correction to duplicate ID */
  flex: 1 0 auto;
  background-color: lightgreen;    /* just for demo */
}
#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>

jsFiddle

要了解这个解决方案是如何工作的，以及是什么阻碍了你，看看这些帖子:

• 使用CSS height属性和百分比值
• Chrome/Safari未填充flex父元素的100%高度