Flexbox居中元素溢出时内容被截断且无法滚动的解决方案咨询

这个问题是flexbox居中时的常见小坑——当你用align-items: center和justify-content: center实现元素居中时，容器的溢出计算逻辑是从左上角开始的，一旦元素尺寸超过容器，左上部分内容会被移出视口，而且常规滚动只能覆盖右下方向的溢出，导致左上内容无法访问。

不用媒体查询的话，有几个实用的解决方案，你可以根据场景选择：

方案一：用auto margin替代flex属性实现居中 #

移除容器的align-items和justify-content，给被居中的元素添加margin: auto，既能保持居中效果，又能让溢出内容正常滚动：

.resizer {
  border: 1px dashed black;
  resize: both;
  width: 400px;
  height: 400px;
  overflow: auto;
  display: flex;
  background-color: #888;
  /* 移除原有的居中属性 */
  /* align-items: center; */
  /* justify-content: center; */
}

.centered {
  flex: 0 0 300px;
  background-color: lime;
  margin: auto; /* 新增这行实现水平垂直居中 */
}

方案二：给容器设置最小宽高（适合固定尺寸元素场景） #

如果你的被居中元素尺寸固定，可以给容器设置min-width和min-height，让容器不会缩小到比元素还小，从根源避免溢出截断：

.resizer {
  border: 1px dashed black;
  resize: both;
  width: 400px;
  height: 400px;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #888;
  min-width: 300px; /* 和centered元素宽度一致 */
  min-height: 300px; /* 和centered元素高度一致 */
}

注意这个方案适合不需要容器无限缩小的场景。

方案三：用Grid布局替代Flexbox #

Grid布局的居中逻辑在处理溢出时更友好，只需要把容器的display改成grid，用place-items: center实现居中即可：

.resizer {
  border: 1px dashed black;
  resize: both;
  width: 400px;
  height: 400px;
  overflow: auto;
  display: grid; /* 替换flex为grid */
  place-items: center; /* 实现水平垂直居中 */
  background-color: #888;
}

这种方式不需要调整其他属性，溢出时滚动条能正常访问所有内容。

以上几种方案都能解决你遇到的截断问题，你可以根据自己的实际需求选择~

备注：内容来源于stack exchange，提问作者Slava Fomin II