html - flex 元素 child 的意外大小

Question

我想用一个菜单构建一个列布局，然后是一个标题，然后是一个使用 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% 时它也会变得很多大于他的父分区。我怎样才能将该 div 的高度限制为父级的高度？

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

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

Answer 1

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

Updated Example

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

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