多层设置align-items的flex容器中百分比height/max-height失效原因？

问题核心 #

当元素嵌套在2个及以上flex-direction: row且align-items非默认stretch（示例为flex-end）的Flex容器中，元素的百分比height或max-height会被忽略。需明确该现象是否符合CSS规范，以及对应的标准依据。

场景说明 #

设计横向排列的分类框，每个分类内的项目框也横向排列；要求分类和项目自适应内容高度，同时高度不超过父容器，底部对齐，内容溢出时可滚动。

代码示例 #

HTML代码 #

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="src/style.css" />
  </head>
  <body>
    <div class="container">
      <div class="category">
        <div class="item">
          <h2>Item 1</h2>
          <p>Small content in section 1</p>
        </div>
      </div>
      <div class="category">
        <div class="item">
          <h2>Item 2</h2>

          <p>Large content in section 2. This section should scroll.</p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
            ultrices mi sit amet laoreet pulvinar. Nam vel pulvinar ligula, sit
            amet dictum ligula. Maecenas tincidunt, dui vel sollicitudin
            euismod, purus ipsum tincidunt mauris, nec tincidunt dolor odio at
            turpis. Aenean non lacus ac purus rhoncus ultrices. Fusce ultrices
            iaculis tellus, et venenatis neque ullamcorper tincidunt. Curabitur
            non urna vitae odio hendrerit sagittis. Ut vitae accumsan arcu.
          </p>
        </div>
        <div class="item">
          <h2>Item 3</h2>
          Small content in section 2.
        </div>
      </div>
    </div>
  </body>
</html>

CSS代码 #

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
}

.container {
  height: 100%;
  display: flex;
  /* 注释掉此属性或.category中的align-items可让.item的max-height生效 */
  align-items: flex-end;
  overflow: hidden;
  
  gap: 5px;
  padding: 5px;
  border: 3px solid red;
}

.category {
  display: flex;
  flex: 1;
  /* 注释掉此属性或.container中的align-items可让.item的max-height生效 */
  align-items: flex-end;
  max-height: 100%;
  overflow: hidden;

  border: 3px solid green;
  gap: 5px;
  padding: 5px;
}

.item {
  position: relative;
  
  width: 200px;
  /* 问题点：当.container和.category同时设置align-items时，此属性不生效 */
  max-height: 100%;
  overflow-y: auto;

  border: 3px solid blue;
  padding: 10px;
}

现象观察 #

• 项目框的max-height: 100%未生效，内容直接溢出容器，无法滚动；
• 给元素设置像素值的height或max-height可正常生效；
• 仅当.container和.category同时设置align-items: flex-end时出现问题，单独设置其中一个，max-height可正常工作。

规范依据与结论 #

该现象符合CSS Flexbox规范，并非浏览器Bug，核心原因在于百分比高度的计算规则和Flex容器的交叉轴尺寸定义：

1. 百分比高度的计算前提：根据CSS规范，元素的百分比height/max-height需要依赖父元素有明确的高度值（即父元素的高度不是由内容自动撑开的“自动高度”）。

2. Flex容器的交叉轴尺寸行为：

   • 当Flex容器设置align-items: stretch（默认值）时，Flex子项会被拉伸至容器的交叉轴高度，此时容器的交叉轴高度会被明确计算（继承自上级容器的高度）；
   • 当设置align-items: flex-end这类非拉伸值时，Flex容器的交叉轴高度会收缩适配子项的内容高度（即容器高度为“自动高度”），而非继承上级容器的高度。

3. 多层嵌套的连锁影响：当.container设置align-items: flex-end后，.category作为其子项，其高度会收缩为自身内容高度，而非继承.container的100%高度；此时.category的max-height: 100%由于父容器（.container）的交叉轴高度未被明确约束为固定值，无法生效，进而导致.item的max-height: 100%失去可依赖的明确高度，最终被忽略。

简单来说：多层非拉伸对齐的横向Flex容器，会让中间容器的高度变成“内容自适应”，导致下层元素的百分比高度失去计算基准。

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