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>

我有两个问题。

您可以看到menu的高度与content的高度相同，对吗？有人可以解释为什么吗？它是否继承了app的高度（其高度是根据content div的内容动态计算的）？
如果我在.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>

¹如果弹性项目的交叉尺寸属性计算为自动，并且两个交叉轴边距都不是自动的，则弹性项目被拉伸。它的使用值是使项目的边距框的交叉尺寸尽可能接近于行的尺寸所需的长度，同时仍要遵守最小高度/最小宽度所施加的约束/max-height/max-width。^ref

在这种情况下，我们只有一行，所以它与整个容器相同。

²指定百分比高度。相对于生成的框的包含块的高度计算百分比。如果包含块的高度不是未明确指定（即，它取决于内容的高度），并且此元素不是绝对定位的，则值将计算为“自动” 。^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>

更新

根据此处的评论，是特殊情况，其中百分比高度在工作时未在父元素中指定高度。

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元素的百分比高度。

在没有拉伸效果的情况下，浏览器需要首先根据内容找到高度，并且内容的高度取决于容器，因此我们具有循环依赖性，这将使百分比高度无法达到{{1} }，以便能够定义容器的高度。

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

1 个答案: