弹性项目子项的意外大小

Question

我想用一个菜单构建一个列布局，然后是一个标题，然后是一个使用弹性框的内容容器。

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

这是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% 时，它也会比他的父 div 大得多。如何将该 div 的高度限制为父级的高度？

注意：我知道我可以将 overflow: auto 直接发送给父 .content，但由于特定于我的应用程序的原因，我真的不想这样做：请只提交符合以下条件的解决方案不要修改 html 结构或更改可滚动容器，因为我已经知道这些解决方案。我更有兴趣了解为什么我的方法不起作用以及如何修复（或不修复？）

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

Answer 1

您可以从.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%;
}

Answer 2

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

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

更详细的解释见：Working with the CSS height property and percentage values

Answer 3

你快到了。

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

一旦达到限制高度，滚动就会激活。在您的情况下，因为您将可滚动区域限制为父（内容）的高度，所以您通过给它高度做对了：100%....但是....100% 什么？

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

这是您更新后的jfiddle