Firefox中writing-mode: vertical-lr与Flexbox兼容问题求助

问题背景 #

动态导航菜单在 Firefox v114.01 中渲染异常，Chrome（v114.0.5735.134）和 Edge（v114.0.1823.43）显示正常。为解决 Flexbox 列模式下容器换行时宽度不自动增长的问题，原本使用了 writing-mode: vertical-lr，但该属性在 Firefox 中的表现与 Chromium 系浏览器存在差异，导致布局失效。

兼容解决方案 #

无需依赖 writing-mode，通过调整 Flexbox 自身属性即可实现跨浏览器兼容的宽度自适应：

• 核心属性调整
  给 Flex 容器添加 align-content: flex-start，同时设置合理的 min-height 触发换行，让 Firefox 正确计算换行后的容器总宽度：

  .nav-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start; /* 修复 Firefox 宽度计算逻辑 */
    min-height: 400px; /* 根据菜单内容高度调整，触发换行的临界值 */
  }
  

• 移除不必要的 writing-mode
  如果原布局中 writing-mode 仅用于解决宽度问题，直接移除该属性；若需要垂直排列文本，仅给文本元素单独设置 writing-mode: vertical-lr，避免影响 Flex 容器的布局计算。

原理说明 #

Firefox 对 writing-mode 与 Flexbox 组合的宽度计算逻辑和 Chromium 系不同，而 align-content: flex-start 会强制 Flex 容器根据换行后的内容块总宽度来自动扩展自身宽度，完美替代原有方案的效果，同时保留 Flexbox 布局的灵活性。

内容的提问来源于stack exchange，提问作者Jean Paul Larach