滚动加载元素时的居中布局问题：内部容器width: fit-content失效原因问询

你遇到的这个问题，核心原因出在 flex容器的子元素收缩行为 上，我来给你拆解清楚：

你的 .viewer 是一个flex容器，设置了 justify-content: center 和 align-items: center。而 .view 作为它的直接子元素，默认会继承flex子元素的默认属性——其中 flex-shrink: 1 是关键：当flex容器的可用空间不足以容纳子元素的原始宽度时，子元素会自动收缩以适配容器宽度。

当你只加载单个元素时，.view 的 width: fit-content 计算出的宽度小于 .viewer 的90%宽度，所以flex子元素不需要收缩，能正常居中且适配子元素宽度。但加载更多元素后，.view 内部子元素的总宽度超过了 .viewer 的宽度，此时 flex-shrink: 1 就会生效，把 .view 的宽度压缩到 .viewer 的宽度，导致它不再适配子元素的总宽度。

解决方案 #

只需要给 .view 添加 flex-shrink: 0 属性，禁止它被flex容器压缩，这样它就能一直保持 width: fit-content 的宽度，即使内部内容超出 .viewer 的范围，也会通过自身的 overflow: scroll 提供横向滚动：

.view {
  position: relative;
  width: fit-content;
  height: auto;
  overflow: scroll;
  background-color: orangered;
  flex-shrink: 0; /* 新增这一行 */
}

这样修改后，不管加载多少元素，.view 都会始终适配内部子元素的总宽度，同时保持在 .viewer 容器中居中，超出部分通过滚动查看。

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