弹性项目的意外大小 child

Question

我想构建一个带有菜单的列布局，然后是一个 header，然后是一个使用 flexboxes 的内容容器。

我知道如何在其他技术中使用固定大小、计算等来构建它...但是在使用 flexboxes 时遇到了麻烦。

这是一个JsFiddle

我有这个：

<div class="layout">
  <div class="menu">
    Menu
  </div>
  <div class="header">
    Header
  </div>
  <div class="content">
    <div class="scrollable-content">
      ...
    </div>
  </div>
</div>

.layout {
  overflow: hidden;
  border: solid;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.menu {
  overflow: hidden;
  border: solid red;
  flex-grow: 0;
  flex-shrink: 0;
}

.header {
  overflow: hidden;
  border: solid green;
  flex-grow: 0;
  flex-shrink: 0;
}

.content {
  overflow: hidden;
  border: solid blue;
  flex-grow: 1;
  flex-shrink: 1;
}

.scrollable-content {
  overflow: auto;
  height: 100%;
  width: 100%;
}

正如您在 JsFiddle 上看到的那样，使用这段代码，.scrollable-content 实际上永远无法滚动，因为即使在使用 height: 100% 时它也会变得比他的 parent 大得多 div。如何将 div 的高度限制为 parent 的高度？

注意：我知道我可以将 overflow: auto 直接放到 parent .content 中，但是出于我的应用程序的特定原因，我真的不想：请只提交不修改html结构或更改可滚动容器的解决方案，因为我已经知道这些解决方案。我更有兴趣了解为什么我的方法不起作用以及如何修复（或不修复？）

显然，可以滚动的内容具有动态高度，而不是像我的 JsFiddle 中那样的固定值 450px。

Answer 1

您在 .content 上缺少一个 height: 100%。

由于您使用的是百分比高度，因此需要为 .scrollable-content 的所有父元素指定高度。

更详细的解释见：

Answer 2

你快到了。

   .content {
       overflow: hidden;
       border: solid blue;
       flex-grow: 1;
       flex-shrink: 1;
       height:450px;  //adjust accordingly.
   }

一旦达到限制高度，卷轴就会激活。在你的情况下，因为你的可滚动区域限制在父级（内容）的高度，你通过给它 height: 100% 做了正确的事......但是......100% 是什么？

因此，您只需要给内容 class 一个停止点。将 450px 更改为更合适的值。如果您试图覆盖该内容下方的空白，则下一项应位于绝对底部。（以防万一那是你想要达到的目的）我已经多次看到这种方法，通常是下面的方法:)

这是您更新后的 jfiddle

Answer 3

您可以从 .scrollable-content 中删除 height: 100%，然后将 .content 的 display 更改为 flex:

Updated Example

.content {
  overflow: hidden;
  border: solid blue;
  flex-grow: 1;
  flex-shrink: 1;
  display: flex;
}

.scrollable-content {
  overflow: auto;
  width: 100%;
}

弹性项目的意外大小 child

Unexpected size for flex item child

html

css

overflow

flexbox