Firefox中CSS width: max-content失效问题求助

问题分析 #

你的.trending.cover-container容器在Firefox中左右出现多余空白，核心原因是Flex布局在不同浏览器中的渲染差异：

• 容器设置了width: max-content和justify-content: center，Firefox会将容器宽度拉伸到max-width: 40%的上限，而Chrome会根据图片实际宽度收缩容器。
• 内部图片设置height: 100%; width: auto，但容器的justify-content:center会导致Firefox错误计算容器宽度。

解决方案 #

修改.trending.cover-container的CSS属性，调整Flex对齐方式并优化宽度计算：

.trending.cover-container {
  height: 100%;
  /* 替换max-content为fit-content，让容器宽度贴合图片 */
  width: fit-content;
  max-width: 40%;
  z-index: 3;
  border-radius: 10px;
  flex-shrink: 0;
  /* 移除justify-content:center，避免容器被撑宽 */
  justify-content: flex-start;
  /* 添加align-items:center，确保图片垂直方向对齐 */
  align-items: center;
}

内部图片样式保持不变：

.trending.manga.cover {
  height: 100%;
  width: auto;
}

原理说明 #

• width: fit-content让容器宽度完全贴合内部图片的实际宽度，同时max-width:40%限制其最大宽度不超过父容器的40%。
• 移除justify-content:center避免Firefox错误拉伸容器宽度，图片已占满容器高度，无需水平居中。
• align-items:center保证图片在容器内垂直方向居中对齐，避免出现垂直空白。

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