Flexbox 子项自动溢出以尊重父项高度

Question

Flexbox 子项自动溢出以尊重父项高度

我希望 Flex 容器中的孙子容器的最大高度包含在容器的总高度 (100%) 减去其他子容器高度中，然后当孙子容器达到其最大尺寸时出现滚动条。

这是一个小提琴来展示它，基本上我不希望列表项溢出绿色容器。

body {
  display: flex;
  flex-direction: column;
  height: 80vh;
}

#header {
  background-color: red;
  height: 30px;
}

#main {
  background-color: green;
  display: flex;
  height: 100%;
  flex-direction: column;
}

#panel {
  height: 100%;
}

#panel-top {
  height: 80px;
  border-style: solid;
}

#panel-bottom-overflow {
  border-style: solid;
  overflow-y: auto;
}

#footer {
  background-color: yellow;
  height: 30px;
}

Run Code Online (Sandbox Code Playgroud)

<body>
  <div id="header">
  </div>
  <div id="main">
    <div id="panel">
      <div id="panel-top">
        Top Panel
      </div>
      <div id="panel-bottom-overflow">
        <ul>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
        </ul>
      </div>
    </div>
  </div>
  <div id="footer">
  </div>
</body>

Run Code Online (Sandbox Code Playgroud)

Answer 1

LGS*_*Son 6

通过为主包装器提供列方向body, #main, #panel，display: flex;子级应该占用剩余空间（#main, #panel, #panel-bottom-overflow）flex: 1，最后添加一个额外的滚动包装器，您将得到这样的结果。

extrascroller通过使用绝对定位克服了溢出元素需要高度的问题。

请注意，此解决方案还可以降低header、panel和footer上的固定高度（我就是这样做的，但您当然可以将它们添加回来）并让它根据其内容调整大小，并且它仍然可以工作。

body, #main, #panel {
  display: flex;
  flex-direction: column;
}
#main, #panel, #panel-bottom-overflow {
  flex: 1;
}

body {
  height: 80vh;
}
#header {
  background-color: red;
  padding: 5px;
}
#main {
  background-color: green;
}
#panel-top {
  border-style: solid;
  padding: 30px 5px;
}
#panel-bottom-overflow {
  position: relative;
  border-style: solid;
}
#panel-bottom-overflow .scroller {
  position: absolute;
  top: 0; left: 0;
  right: 0; bottom: 0;
  overflow: auto;
}
#footer {
  background-color: yellow;
  padding: 5px;
}

Run Code Online (Sandbox Code Playgroud)

<div id="header">
  Header
</div>
<div id="main">
  <div id="panel">
    <div id="panel-top">
      Top Panel
    </div>
    <div id="panel-bottom-overflow">
      <div class="scroller">
        <ul>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
        </ul>
      </div>
    </div>
  </div>
</div>
<div id="footer">Footer
</div>

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，6 月前
查看次数：	6316 次
最近记录：	8 年，6 月前