javascript - 如何使 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

查看以下 fiddle 中的解决方案，只需确保将窗口调整得更大，以便滚动条可以出现。 Solution at this fiddle, Click Here

即使 header 变大了，header 仍然会适合它的大小，不需要指定它的大小，content div 会填充剩余的空间。

HTML、CSS

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

.all-wrapper{
  height: 100%;
  display:flex;
  flex-direction:column;
}
.wrapper-1 {
  background: white;
}

.wrapper-2 {
  background: lime;
}

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

#header {
  background: #edc;
}

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

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

<div class="all-wrapper">
<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 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>
</div>