CSS 弹性布局（flex）的height计算

在CSS的弹性布局(Flexbox)中，容器的高度(height)可以通过几种方式进行计算：

1. 如果容器的高度设置为具体的值（如px, em, rem等单位），则使用这个具体值作为高度。
2. 如果高度设置为百分比(%)，则基于父容器的高度进行计算。
3. 如果没有为容器设置高度，默认情况下，弹性容器的高度将由其内容撑开。
4. 如果使用了min-height，则弹性容器的高度将至少为指定的最小高度。
5. 如果使用了max-height，则弹性容器的高度将不会超过指定的最大高度。

以下是一个简单的弹性布局示例，演示如何设置容器的高度：

.container {
  display: flex; /* 启用弹性布局 */
  height: 100px; /* 设置高度为100px */
  /* 或者使用百分比高度 */
  /* height: 50%; */
  /* 或者设置最小高度 */
  /* min-height: 150px; */
  /* 或者设置最大高度 */
  /* max-height: 200px; */
}
 
.item {
  flex: 1; /* 让所有子项均分空间 */
  /* 子项的高度将由其内容决定，除非也设置了高度 */
}

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

在这个例子中，.container 是一个弹性容器，其高度被设置为100px。.item 是其子项，它们将根据内容的高度进行伸缩。如果为.item设置了具体的高度，则会覆盖由内容决定的高度，并使用指定的高度。