Flexbox同时实现垂直居中和垂直滚动条时异常行为问题咨询

预期效果 #

我有一个固定高度的容器，希望其内容按如下方式居中：

但当容器高度变小（或内容量变多）时，希望出现如下滚动条：

存在问题的实现方案 #

以下是我的实现代码：

.Container {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  
  overflow-y: auto;
  
  border: 10px dashed black;
  box-sizing: border-box;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="Container">
  <ol class="Content">
    <li>Hello world.</li>
    <li>Hello world.</li>
    <li>Hello world.</li>
    <li>Hello world.</li>
    <li>Hello world.</li>
    <li>Hello world.</li>
    <li>Hello world.</li>
    <li>Hello world.</li>
    <li>Hello world.</li>
    <li>Hello world.</li>
    <li>Hello world.</li>
    <li>Hello world.</li>
    <li>Hello world.</li>
    <li>Hello world.</li>
    <li>Hello world.</li>
    <li>Hello world.</li>
    <li>Hello world.</li>
    <li>Hello world.</li>
    <li>Hello world.</li>
    <li>Hello world.</li>
  </ol>
</div>

第一种情况（高度充足、无滚动条）表现正常，但第二种情况（高度不足、出现滚动条）时滚动条行为异常：

👆 注意滚动条已经处于顶部位置，但内容顶部仍被裁剪，无法查看第一行内容。
容器高度和内容高度的差值越大，被裁剪的内容就越多。
我发现删除以下代码行可以解决滚动条场景的问题：

align-items: center;

但这会破坏无滚动条布局下的垂直居中效果。该行为在Chrome和Firefox浏览器中表现一致。

不理想的临时解决方案 #

我的临时方案是将overflow-y: auto移动到内部容器上，代码如下：

.Content {
  max-height: 100%;
  overflow-y: auto;
}

但这会改变滚动条的位置：

这对于平板设备来说体验极差，因为平板上滚动条默认隐藏，用户会误以为该区域无法滚动。

咨询问题： #

1. 为什么会出现该现象？我知道是垂直居中导致的，现在滚动条似乎只能控制两个高度差值的50%。但为什么会有这样的表现？是否有相关标准定义？该设计是否有实际价值？
2. 我该如何实现预期效果？最好是对现有代码改动最小的方案。

解答 #

问题1：现象原因说明 #

该表现是Flex布局的标准规定行为：当flex容器设置align-items: center时，子项的垂直对齐优先级高于溢出规则。当子项高度超过容器高度时，子项会向容器上下两侧等量溢出，而非仅向下溢出。而滚动容器的可滚动范围默认仅覆盖向下溢出的内容，顶部溢出的部分就无法通过滚动访问，因此会出现内容顶部被裁剪的问题。
该规则是W3C FlexBox规范明确定义的，设计初衷是保证多子项布局下对齐逻辑的一致性：比如同一flex行内有两个高度不同的子项，即便内容溢出也能保持相对对齐的状态，只是在单内容垂直居中+滚动的场景下不符合预期。

问题2：最小改动解决方案 #

方案1：使用安全对齐关键字（仅改1行代码）

直接将容器的align-items: center修改为align-items: safe center即可：

.Container {
  /* 其余原有代码完全不变 */
  display: flex;
  align-items: safe center; /* 仅修改这一行 */
  justify-content: center;
}

safe是CSS对齐规范新增的关键字，作用是当子项溢出容器时自动回退到start对齐，保证所有溢出内容可滚动访问，高度充足时仍保持居中效果，完全符合需求。目前Chrome、Firefox、Safari 15.4+都支持该属性。

方案2：改用Grid布局（兼容性更好，仅改1行代码）

如果需要兼容更低版本浏览器，直接把容器的display: flex修改为display: grid即可，其余代码完全不用改：

.Container {
  /* 其余原有代码完全不变 */
  display: grid; /* 仅修改这一行 */
  align-items: center;
  justify-content: center;
}

Grid布局的居中逻辑和Flex不同，子项溢出时上下溢出的内容都属于可滚动区域，完美覆盖需求，兼容性覆盖除IE11外的所有主流浏览器。

内容的提问来源于stack exchange，提问作者Andrey Mikhaylov - lolmaus