max-height设为100%时Flex容器溢出父元素的原因解析

我有以下HTML结构元素：

• .modal：页面模态框，设置了max-height: 30vh的高度限制
• .wrapper：包裹模态框内容的容器，包含搜索输入框和元素列表
• .list：元素列表，总高度超过30vh

期望实现的行为是：.wrapper被输入框占据部分空间后，剩余空间由列表填充，当列表项过多时触发滚动。

但实际情况是，不给.modal设置display: flex时，即便.wrapper已经设置了overflow: hidden和max-height: 100%（理论上等于父元素的30vh），.list和.wrapper还是会溢出页面。想知道为什么会出现这种行为？为什么未给.modal设置display: flex时，.wrapper会溢出父元素？

代码示例 #

CSS代码 #

.modal {
  background-color: red;
  padding: 3rem;
  flex-direction: column;
  gap: 1rem;
  max-height: 30vh;
}

.item {
  height: 30px;
  background-color: green;
}

.wrapper {
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background-color: orange;
  overflow: hidden;
}

.list {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1rem;
  overflow: scroll;
}

HTML代码 #

<div class="modal">
  <div class="wrapper">
    <input />

    <div class="list">
      <div class="item">
        sds
      </div>
      <div class="item">
        sds
      </div>
      <div class="item">
        sds
      </div>
      <div class="item">
        sds
      </div>
      <div class="item">
        sds
      </div>
      <div class="item">
        sds
      </div>
      <div class="item">
        sds
      </div>
      <div class="item">
        sds
      </div>
      <div class="item">
        sds
      </div>
      <div class="item">
        sds
      </div>
      <div class="item">
        sds
      </div>
      <div class="item">
        sds
      </div>
      <div class="item">
        sds
      </div>
      <div class="item">
        sds
      </div>
      <div class="item">
        sds
      </div>
      <div class="item">
        sds
      </div>
      <div class="item">
        sds
      </div>
      <div class="item">
        sds
      </div>
      <div class="item">
        sds
      </div>
      <div class="item">
        sds
      </div>
      <div class="item">
        sds
      </div>
      <div class="item">
        sds
      </div>
    </div>
  </div>
</div>

核心原因在于块级元素的高度计算规则和**max-height: 100%的生效条件**：

1. 未设置display: flex时，.modal是默认块级元素
   块级元素的高度默认由内容撑开，即便设置了max-height: 30vh，它只会限制自身的最大高度，但不会强制子元素.wrapper遵守这个限制——块级父元素不会主动约束子元素高度，子元素高度依然由自身内容决定。

2. max-height: 100%的生效前提
   给.wrapper设置max-height: 100%时，这个百分比是相对于父元素的计算高度。但如果父元素（.modal）是块级元素且仅设置max-height（未明确设置height），父元素的计算高度就是内容的实际高度，而非30vh。此时.wrapper的max-height: 100%等同于“和父元素内容高度一致”，而非限制在30vh内，自然会跟着内容溢出。

3. flex布局的约束作用
   给.modal设置display: flex后，flex容器会强制子元素（.wrapper）遵守容器的高度限制：

   • flex容器会将自身可用空间分配给子元素，.wrapper作为唯一子元素会占满容器高度（受max-height:30vh限制）
   • 此时.wrapper的max-height:100%才真正对应30vh，再配合自身的flex-direction:column和.list的flex:1，就能让列表占据剩余空间并在内容过多时触发滚动。

内容的提问来源于stack exchange，提问作者DorotaMachalova