在这种情况下如何计算高度？

Question

在此设置中：

html,
body {
  height: 100%;
}

.app {
  display: flex;
}

.menu {
  background-color: red;
  width: 100px;
}

.content {
  flex: 1;
  border: 1px solid blue;
}

<div class="app">
    <div class="menu">menu</div>
    <div class="content">
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
    </div>
  </div>

我有两个问题。

1. 您可以看到menu 的高度与content 的高度相同，对吧？ 有人可以解释这是为什么吗？是否继承了app的高度（高度是根据contentdiv的内容动态计算的）？

2. 如果我在 .menu 属性中插入 height: 100%，如下所示：

.menu {
            background-color: red;
            width: 100px;
            height: 100%
      }

然后菜单的高度降低。有人可以解释为什么会这样吗？如果 menu 应该像之前的情况一样继承 app 的高度，那么为什么写 height:100% 会阻止这种情况呢？

Answer 1

对于第一种情况，它与 flexbox 的默认对齐方式有关，即stretch。因此，所有元素都会拉伸以适应容器的高度¹，因此菜单与内容的高度相同。换句话说，最高的元素将定义高度，另一个将拉伸以适应该高度。

更改对齐方式，您将不再有这种行为：

html,
body {
  height: 100%;
}

.app {
  display: flex;
  align-items:flex-start; /*anything different from stretch*/
}

.menu {
  background-color: red;
  width: 100px;
  height:100%;
}

.content {
  flex: 1;
  border: 1px solid blue;
}

<div class="app">
  <div class="menu">menu</div>
  <div class="content">
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
  </div>
</div>

通过添加height:100%，您现在可以明确地为元素应用高度（不再应用拉伸），但这将无法达到auto 值（内容的高度），因为父元素没有指定任何高度²

html,
body {
  height: 100%;
}

.app {
  display: flex;
}

.menu {
  background-color: red;
  width: 100px;
  height:100%;
}

.content {
  flex: 1;
  border: 1px solid blue;
}

<div class="app">
  <div class="menu">menu</div>
  <div class="content">
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
  </div>
</div>

¹ 如果 flex 项目的 cross size 属性计算为 auto，并且两个交叉轴边距都不是 auto，则 flex 项目被拉伸。它使用的值是使项目的边距框的交叉尺寸尽可能接近与线相同的尺寸所需的长度，同时仍然尊重 min-height/min-width 施加的约束/max-height/max-width.^ref

我们的案例中只有一行，因此它与整个容器相同。

---

² 指定百分比高度。该百分比是相对于生成的框的包含块的高度计算的。如果包含块的高度没有明确指定（即，它取决于内容高度），并且该元素不是绝对定位的，则值计算为'auto' .^ref

给应用添加一个高度，你会看到发生了什么：

html,
body {
  height: 100%;
}

.app {
  display: flex;
  height:80%;
}

.menu {
  background-color: red;
  width: 100px;
  height:100%;
}

.content {
  flex: 1;
  border: 1px solid blue;
}

<div class="app">
  <div class="menu">menu</div>
  <div class="content">
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
  </div>
</div>

更新

根据这里的 cmets，特殊情况是百分比高度在父元素中没有指定高度的情况下起作用。

html,
body {
  height: 100%;
}

.app {
  display: flex;
  height: 80%;
}

.menu {
  background-color: red;
  width: 100px;
}

.container{
  flex: 1;
  background:green;
}

.test {
  height: 80%;
  border: 2px solid blue;
}

<div class="app">
<div class="menu">menu</div>
  <div class="container">
    <div class="test">percentage height is working here!! why??</div>
  </div>
</div>

正如我在a previous answer 中解释的那样，.container 的高度没有明确设置，但我们没有任何循环依赖，因为.container 的高度是由拉伸行为而不是他的内容定义的，所以浏览器可以先用stretch设置.container的高度，然后解析.test元素的百分比高度。

如果 flex 项目有 align-self:stretch，重做其内容的布局，将此使用的大小视为其确定的交叉大小，以便可以解析百分比大小的子项。 ^ref

在没有拉伸效果的情况下，浏览器需要先根据内容找到高度，而内容的高度是基于容器的，因此我们有一个循环依赖，这会使百分比高度失败到auto in为了能够定义容器高度。