如何使 flexbox 元素填充剩余空间并滚动？

Question

我试图在某些元素的剩余空间中放置一个垂直可滚动的 div。它们都没有固定的高度。

我得到的只是一个适应其内容的 flexbox 元素，但我真正需要的是该元素填满空白空间，并且它的内容只是滚动到那里。

Code at Fiddle

HTML

<div class="wrapper-1">
  <div>some stuff</div>
  <div>some other stuff</div>
</div>
<div class="wrapper-2">
  <div>more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more stuff</div>
</div>
<div class="wrapper-3">
  <div id="header">
      <div>My</div>
      <div>Header than can grow</div>
  </div>
  <div id="content">
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
  </div>
</div>

CSS

html, body {
    margin: 0;
    height: 100%;
}

.wrapper-1 {
  background: white;
}

.wrapper-2 {
  background: lime;
}

.wrapper-3 {
  display: flex;
  flex-direction: column;
}

#header {
  background: #edc;
  flex: 1 1 40px;
}

#content {
    flex: 1 1 auto;
    background: yellow;
    overflow: auto;
}

#content div {
  min-height: 50px;
}

#content 的高度应为从 #header 到页面底部的高度。

完美的解决方案是仅使用 CSS，但替代的 JS 解决方案可能会有所帮助，问题是即使在调整浏览器窗口大小时它也必须工作。

Answer 1

实际上 flex 原生地填充了空白区域。你想要的是设置父容器的高度，你有两个解决方案：

• 将height: 100% 设置为html、正文和所有中间容器，直到您到达.wrapper
• 或者用更简洁的方法：直接将.wrapper的min-height设置为100vh（意思是100%的视口高度）。下面的例子

.wrapper {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

#content {
  flex: 1;
}

.wrapper > div {
  border: 1px solid tomato;
}

<div class="wrapper">
  <div>
    <div>some stuff</div>
    <div>some other stuff</div>
  </div>
  <div>
    <div>My</div>
    <div>Header than can grow</div>
  </div>
  <div id="content">
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
  </div>
</div>