CSS高度固定触发条件解析：scrollable元素高度变化原因探究

公共CSS代码 #

.centered {
    position       : absolute;
    top            : 0;
    left           : 0;
    right          : 0;
    bottom         : 0;
    display        : flex;
    flex-direction : column;
    align-items    : center;
}

.problem {
  width: fit-content;
}

.scrollable {
  width: fit-content;
  overflow-y: auto;
  margin: auto;
}

.content {
  display: inline-block;
}

场景1：无.problem元素时scrollable固定高度逻辑 #

对应HTML结构 #

<div class="centered">
  <div class="scrollable">
    <div class="content">
      <h1>Line1</h1>
      <h1>Line2</h1>
      <h1>Line3</h1>
      <h1>Line4</h1>
      <h1>Line5</h1>
      <h1>Line6</h1>
      <h1>Line7</h1>
    </div>
  </div>
</div>

固定高度产生原因及计算规则 #

1. .centered 为绝对定位元素，top/right/bottom/left 均设为0，因此它的尺寸完全贴合初始包含块（即浏览器视口），高度等于视口高度。同时它是 flex-direction: column 的flex容器，主轴为垂直方向，交叉轴为水平方向。
2. .scrollable 是flex容器的直接子项，同时设置了 margin: auto 和 overflow-y: auto。根据flex布局规范，当flex子项在主轴方向设置了自动margin，且overflow属性不为visible时，子项的尺寸会被限制为flex容器的可用空间，以此保证auto margin可以正常分配剩余空间实现居中效果。
3. 此时 .scrollable 的高度等于视口高度，当内部.content的内容高度超过视口高度时，overflow-y: auto 生效触发滚动，因此呈现固定高度的表现。

场景2：新增.problem元素后scrollable高度自适应原理 #

对应HTML结构 #

<div class="centered">
  <div class="problem">
  <div class="scrollable">
    <div class="content">
      <h1>Line1</h1>
      <h1>Line2</h1>
      <h1>Line3</h1>
      <h1>Line4</h1>
      <h1>Line5</h1>
      <h1>Line6</h1>
      <h1>Line7</h1>
    </div>
  </div> 
  </div>
</div>

高度变化的底层逻辑 #

1. 新增.problem元素后，flex容器.centered的直接子项变为.problem，不再是.scrollable。
2. .problem仅设置了width: fit-content，没有设置高度、overflow属性和自动margin，作为flex子项它的高度默认由内容高度撑开，不会被flex容器约束高度。
3. .scrollable现在是普通块级元素.problem的子项，普通块级元素在未显式设置高度的情况下，会完全由内容高度决定自身尺寸，因此.scrollable设置的overflow-y: auto失去了高度约束前提，会直接跟随内容高度撑开，不会被限制为视口高度，也就不再呈现固定高度的表现。

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