为何Flexbox中flex: 1需配合height: 0固定高度？

在 CSS Flexbox 布局中，使用 flex: 1 使子元素可以均匀分配可用空间，这个属性设置了子元素的 flex-grow、flex-shrink 和 flex-basis 属性值。具体来说，flex: 1 相当于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%。

但是，默认情况下，Flexbox 的子元素的高度会由其内容决定。如果子元素的内容高度变化，子元素的高度也会随之变化。为了确保子元素的高度在使用 flex: 1 时不受内容高度变化的影响，可以通过设置 height: 0 来达到这个目的。以下是详细解释：

flex: 1 的作用:
- flex-grow: 1: 子元素将尝试占据父容器中所有可用的空间（在主轴方向上）。
- flex-shrink: 1: 当父容器缩小时，子元素的尺寸会缩小。
- flex-basis: 0%: 子元素的初始主轴尺寸被设定为 0，这使得 flex-grow 和 flex-shrink 能够工作。
子元素高度的默认行为:
- 在 Flexbox 布局中，子元素的高度通常由内容决定，即使设置了 flex: 1，如果内容的高度超出了默认高度，子元素的高度会随内容变化。
为什么设置 height: 0:
- 通过设置 height: 0，你告诉浏览器子元素的初始高度为 0。在这种情况下，flex-grow: 会使子元素根据父容器的高度均匀分配空间，而不会因为内容高度而改变。
- 这就意味着，子元素会根据父容器的高度来确定自身高度，而不是根据内容高度。

简单来说，设置 height: 0 结合 flex: 1 可以确保子元素的高度是固定的，并且根据父容器的高度分配，而不是随内容变化。

下面是一个简单的示例，展示了上述概念：

xml 复制代码

<!DOCTYPE html>
<html>
<head>
<style>
  .container {
    display: flex;
    height: 300px; /* 父容器的高度 */
  }
  .child {
    flex: 1;
    height: 0; /* 设置 height: 0 */
    background-color: lightblue;
  }
</style>
</head>
<body>

<div class="container">
  <div class="child">
    <!-- 即使内容很高，子元素的高度也不会随内容变化 -->
    这是一段很长的内容，这是一段很长的内容，这是一段很长的内容，这是一段很长的内容，这是一段很长的内容。
  </div>
  <div class="child">
    这是另一段内容。
  </div>
</div>

</body>
</html>

在这个例子中，无论子元素的内容有多高，每个子元素的高度都由父容器的高度均匀分配，而不会根据内容高度变化。同理，如果设置了flex:1 width:0，也会让宽度不随内容的长度而发生变化。这样对于某些动态的标题内容溢出需要自适应的场景也很实用。