使用overflow:auto实现Flexbox图片自适应缩放在Firefox中失效

这不是Firefox的Bug，而是不同浏览器对Flexbox容器尺寸计算的逻辑差异导致的。Chrome会根据缩放后图片的实际尺寸自动调整flex容器的宽度，但Firefox在flex-direction: column布局下，会优先以容器的初始可用宽度（即max-width: 80vw）为基准计算，不会主动根据子元素的实际宽度收缩容器。

解决办法 #

可以通过以下两种方式修正Firefox的表现：

方法1：给容器添加align-self: flex-start #

修改.container的CSS，让它在flex列布局中不再占满父容器宽度，而是自适应内容宽度：

.center {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-height: 80vh;
  max-width: 80vw;
}
img {
  max-height: 100%;
  max-width: 100%;
}
.container {
  overflow: auto;
  align-self: flex-start; /* 新增属性 */
}

方法2：给容器设置width: fit-content #

直接让容器宽度匹配内容尺寸：

.center {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-height: 80vh;
  max-width: 80vw;
}
img {
  max-height: 100%;
  max-width: 100%;
}
.container {
  overflow: auto;
  width: fit-content; /* 新增属性 */
}

两种方式都能让Firefox正确调整容器宽度以适配缩放后的图片，同时不影响Chrome的正常显示效果。

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