Firefox中嵌套图片宽度不影响父节点的问题修复咨询

问题原因 #

Firefox的flex布局渲染逻辑与Chrome等浏览器存在差异：当flex子元素（这里是#inner）未设置明确宽度约束时，它会默认以内容的最小宽度作为自身宽度，导致图片无法在蓝色背景区域内居中显示，而Chrome等浏览器会自动让flex子元素适配父容器宽度。

修复方案 #

以下几种方法都可以解决这个问题，选其一即可：

方法1：给内层容器设置宽度

给#inner添加width: 100%，让它铺满父容器#root的宽度，同时给图片添加max-width: 100%防止图片超出容器：

#inner {
  background: red;
  display: flex;
  justify-content: center;
  width: 100%; /* 新增 */
}

img {
  height: 100%;
  max-width: 100%; /* 新增，可选但推荐 */
}

方法2：调整图片的尺寸约束

保持#inner的flex布局，给图片同时设置height: 100%和width: auto，并让#inner继承父容器的宽度约束：

#inner {
  background: red;
  display: flex;
  justify-content: center;
  width: inherit; /* 新增 */
}

img {
  height: 100%;
  width: auto; /* 明确宽度自适应 */
  max-width: 100%;
}

方法3：修改外层flex容器的对齐属性

给#root添加align-items: center确保垂直方向也居中（如果需要），同时让#inner成为flex可扩展元素：

#root {
  position: absolute;
  height: calc(100% - 70px);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center; /* 新增，垂直居中 */
  background: blue;
  max-height: none;
}

#inner {
  background: red;
  display: flex;
  justify-content: center;
  flex: 1; /* 新增，让容器占满可用宽度 */
}

img {
  height: 100%;
  max-width: 100%;
}

验证效果 #

修改后在Firefox中刷新页面，图片会在红色背景内居中，红色背景容器也会铺满蓝色背景区域的宽度，实现预期的居中效果，同时保持在Chrome、Opera、Safari中的正常显示。

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