Html flex项子项的意外大小

我想使用FlexBox构建一个包含菜单、标题和内容容器的列布局

我知道如何在其他技术中使用固定大小、计算等来构建它。。。但是Flexbox有问题

这是一个

我有这个：

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

---

正如您在JSFIDLE上看到的，使用此代码，

.scrollable内容实际上永远不可滚动，因为即使使用
height:100%
它也会比其父div大很多。如何将该div的高度限制为父div的高度

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

显然，可以滚动的内容有一个动态高度，而不是像我的JSFIDLE中那样的
450px
的固定值。
您缺少
上的
高度：100%

因为您使用的是百分比高度，所以需要为
.scrollable content
的所有父元素指定一个高度

有关更详细的说明，请参见：
您就快到了

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

一旦达到限制高度，滚动就会激活。在您的例子中，由于您将可滚动区域限制为父级（内容）高度，您正确地给出了它的高度：100%……但是……100%是什么

因此，您所需要的只是给content类一个停止点。将450px更改为更合适的值。如果您试图填补该内容下方的空白，则下一项应位于绝对底部。（以防万一，这正是你想要达到的目标）我已经见过很多次这种方法，通常情况下就是这样：）

这是您的更新版
您可以从
中删除
高度：100%
。可滚动内容
，然后将
的
显示
。内容
更改为
柔性
：


否，因为我不希望
.content
成为其父内容的100%：我希望它增长并填充空白。查看问题：
.content
将溢出
.layout
，我理解，但是您需要在
.content
上指定一个高度，以便在
上使用百分比高度。可滚动内容
。这符合规范。目前它正在解析为
height:auto
。或者，您可以放弃另一种方法的百分比高度，例如嵌套flexbox，也许吧。首先使用
flex grow
的目的是能够占用所有的空白空间，而不必考虑给出大小：）我已经知道我可以自己计算高度，但希望避免这种情况，因为实际上我的布局的某些部分可以根据上下文点动态添加或删除使用flex grow的好处是不必指定任何高度。我已经知道如何通过使用静态高度或
calc（）
实现此布局。
   .content {
       overflow: hidden;
       border: solid blue;
       flex-grow: 1;
       flex-shrink: 1;
       height:450px;  //adjust accordingly.
   } 

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

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