溢出：隐藏在 Flexbox 中无法按预期工作

Posted 2023-03-05

【中文标题】溢出：隐藏在 Flexbox 中无法按预期工作

【英文标题】：Overflow: hidden not working as expected with Flexbox

【发布时间】：2019-01-08 18:14:38

【问题描述】：

我正在尝试构建一个导航面板，它的顶部有一个固定高度的主导航栏，一个固定在屏幕底部的固定高度的辅助导航栏，以及一个填充剩余空间的容器，并且是可根据内部项目列表的长度滚动。

我正在学习使用 flexbox 并认为我可以使用 flex-grow 和 overflow: hidden 来完成此操作，但是我遇到了一些麻烦。

Here's a fiddle

html,
body 
  height: 100%;


.container-main 
  display: flex;
  height: 100%;
  flex-flow: column;


.nav-bar 
  display: flex;
  height: 36px;
  background-color: grey;


.container-dd 
  height: 100%;
  display: flex;
  flex-flow: column;


.dd-fill 
  display: flex;
  flex-flow: column;
  flex: 1 1 auto;
  background-color: green;
  overflow: hidden;


.dd-bot 
  display: flex;
  height: 100px;

<div class="container-main">
  <div class="nav-bar">top nav bar</div>
  <div class="container-dd">
    <div class="dd-fill">
      <p>list item</p>
      <p>list item</p>
      <p>list item</p>
      <p>list item</p>
      <p>list item</p>
      <p>list item</p>
      <p>list item</p>
      <p>list item</p>
      <p>list item</p>
    </div>
    <div class="dd-bot">sticky footer</div>
  </div>
</div>

从fiddle可以看出，div dd-fill里面放不下的内容是无法访问的，也没有滚动条。辅助导航栏的固定高度也没有被强制执行。有谁知道它为什么会这样？提前致谢。

【参考方案1】：

您可以通过将 hidden 更改为 auto 并使用 min-height 来解决溢出问题（我有时也会添加 max-height 以确保它不会在更大的屏幕上增长）而不是顶部和底部位的高度：

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


.container-main 
  display: flex;
  height: 100%;
  flex-flow: column;


.nav-bar 
  display: flex;
  min-height: 36px;         /* use min-height */
  background-color: grey;


.container-dd 
  height: 100%;
  display: flex;
  flex-flow: column;


.dd-fill 
  display: flex;
  flex-flow: column;
  flex: 1 1 auto;
  background-color: green;
  overflow: auto;            /* use auto so scrollbar appears */


.dd-bot 
  display: flex;
  min-height: 100px;       /* use min-height */

<div class="container-main">
  <div class="nav-bar">top nav bar</div>
  <div class="container-dd">
    <div class="dd-fill">
      <p>list item</p>
      <p>list item</p>
      <p>list item</p>
      <p>list item</p>
      <p>list item</p>
      <p>list item</p>
      <p>list item</p>
      <p>list item</p>
      <p>list item</p>
    </div>
    <div class="dd-bot">sticky footer</div>
  </div>
</div>

【讨论】：

干得不错！谢谢。

这引入了另一个滚动条，我认为这不是一个理想的体验。我的建议是使用按钮展开折叠模式来避免滚动条。

@Signcodeindie 没用过，很奇怪。无论如何，如果您正在寻找带有可滚动内容的粘性页脚，我会将页眉和页脚放在同一个父容器中，这样可以更容易地使中间滚动：jsfiddle.net/5uoqwp8s

【参考方案2】：

问题是您为.container-dd 设置了固定高度100% 和overflow: hidden

.conrtainer-dd 
   height: 100%;
   overflow: hidden;

100% 的固定高度阻止 .container-dd 扩展以包含所有附加内容，overflow: hidden 阻止出现滚动条。改变你的风格。

.container-dd 
   ...
   height: auto;
   min-height: 100%;
   overflow: auto;
   ...

另外，这样做。

.dd-fill 
   height: auto;
   overflow: hidden;