Firefox中使用writing-mode: vertical-lr时Flex子项无法随内容展开的问题排查与解决方案问询

我之前也碰到过Firefox在垂直排版下Flex+Grid组合布局的坑，咱们来一步步拆解你的问题：

问题原因分析 #

Firefox在处理writing-mode: vertical-lr与Flex、Grid布局的组合时，尺寸计算逻辑和其他浏览器存在差异。具体来说，当你的Flex子项（.link）是Grid容器时，Firefox没有正确识别垂直排版文本换行后所需的宽度，而是默认给所有Flex子项分配了统一的最小宽度，导致长文本直接溢出容器。这属于浏览器对布局规范的细节实现差异，并非你的代码逻辑错误。

针对你的需求的解决方案 #

因为你希望保留.link的display: grid属性，我推荐以下几种无需移除Grid的修复方案：

方案1：给Grid子项设置最小宽度适配内容 #

给.link添加min-width: min-content，强制Flex子项的最小宽度等于内容的实际需求宽度：

.link {
  display: grid;
  background: green;
  border: black solid 1px;
  min-width: min-content; /* 新增属性 */
}

原理：min-content会让元素宽度适配内容换行后的最小必要宽度，避免Firefox默认的宽度压缩。

方案2：通过Grid列定义适配内容 #

利用Grid布局的特性，直接指定列宽为内容适配值：

.link {
  display: grid;
  grid-template-columns: min-content; /* 新增属性 */
  background: green;
  border: black solid 1px;
}

原理：让Grid容器的列宽自动匹配内容的最小宽度，从而带动整个.link容器的宽度自适应。

方案3：辅助Flex子项的尺寸计算 #

如果上面两种方案效果不佳，可以给.wrapper添加flex-wrap: wrap，同时调整.link的flex-shrink属性，避免子项被过度压缩：

.wrapper {
  display: flex;
  background: blue;
  height: 200px;
  flex-wrap: wrap; /* 新增属性 */
}

.link {
  display: grid;
  background: green;
  border: black solid 1px;
  flex-shrink: 0; /* 新增属性，禁止子项被压缩 */
}

这个方案适合你允许子项在空间不足时换行的场景。

额外验证建议 #

你可以给.title添加white-space: normal（虽然默认就是这个值），确保文本能正常换行：

.title {
  writing-mode: vertical-lr;
  background: pink;
  text-align: center;
  white-space: normal;
}

备注：内容来源于stack exchange，提问作者anywhereseason