设置align-items:center的Flex容器仅未完全可见时随内容高度变化移位

问题根源 #

这是浏览器视口外元素重排优化导致的bug：当flex容器部分移出视口后，浏览器为了减少重绘开销，没有准确计算align-items: center下子元素的实际高度，导致容器高度随内容行数变化出现异常伸缩。这种情况在依赖子元素居中位置确定容器高度的flex布局里很容易触发。

可行解决方案（无需固定内容高度） #

方案1：用margin:auto替代align-items:center #

删掉容器的align-items: center，给内部的文本div和ul分别加margin: auto 0。两个子元素会自动垂直居中，容器高度由最高的子元素撑开，浏览器重排计算更稳定，视口外不会再出现异常：

/* 修改后的容器样式 */
.flex-container {
  display: flex;
  /* 移除align-items: center */
  gap: 20px;
  padding: 10px;
  border: 1px solid #ccc;
}

/* 子元素统一样式 */
.text-div, .list-ul {
  margin: auto 0;
}

方案2：改用Grid布局 #

用Grid的place-items: center实现垂直水平居中，Grid的布局计算逻辑比flex更稳定，视口外重排不会出问题：

.flex-container {
  display: grid;
  grid-template-columns: auto auto;
  place-items: center;
  gap: 20px;
  padding: 10px;
  border: 1px solid #ccc;
}

这两种方案都能保留内容高度的动态性，同时实现垂直居中，完美解决滚动后的容器伸缩问题。

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