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

Posted 2023-03-07

【中文标题】如何使 flexbox 元素填充剩余空间并滚动？

【英文标题】：How to make a flexbox element fill the remaining space and scroll?

【发布时间】：2019-08-26 15:42:31

【问题描述】：

我试图在某些元素的剩余空间中放置一个垂直可滚动的 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 解决方案可能会有所帮助，问题是即使在调整浏览器窗口大小时它也必须工作。

【问题讨论】：

没有固定高度限制，overflow 无法工作（它没有溢出限制）。即使只是1px，您也需要沿线某处固定高度。 ***.com/q/52487743/3597276

***.com/questions/40020921/…

@Michael_B 我知道，我知道.. 但也许有一些方法可以做到这一点，也许使用 JS，我想在 CSS 中拥有一切，但是，如果 JS 中有一个选项可以做到即使调整浏览器窗口的大小，这个技巧也会有所帮助。

@kukkuz 不是我要找的

@George，在您的问题中包含该信息，并添加 JS / jQuery 标签。

【参考方案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>

【讨论】：

我在这里看到一切都在滚动，而不仅仅是最后一个容器。