Flex项目子项的意外大小

Question

我想构建一个列布局，其中包含菜单，然后是标题，然后是使用flexbox的内容容器。

我知道如何在其他技术中使用固定尺寸，计算等来构建它......但是在使用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结构或更改可滚动容器的解决方案，因为我已经知道这些解决方案。 我更有兴趣了解为什么我的方法不起作用以及如何修复（或不是？）

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

Answer 1

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

更新的示例

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

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

Answer 2

你错过了一个height: 100% on .content 。

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

有关更详细的说明，请参阅： 使用CSS height属性和百分比值

Answer 3

你快到了。

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

一旦达到有限高度的高度，滚动就会激活。 在您的情况下，因为您的可滚动区域限制为父级（内容）高度，您通过给它高度：100％....但是...... 100％的内容做得对吗？

因此，您只需要为内容类提供一个停止点。 将450px更改为更合适的任何内容。 如果您试图覆盖低于该内容的间隙，那么下一个项目应该位于绝对底部。 （以防这是你要去的地方）我已经多次看到这种方法，这通常是接下来:)

这是你更新的jfiddle