Firefox中嵌套Flex容器结合writing-mode:vertical-lr布局异常求助

问题说明 #

在Firefox浏览器中，使用writing-mode: vertical-lr垂直书写模式搭配嵌套Flex容器时，第二层Flex容器无法自动展开以容纳子元素，导致布局断裂。当前开发横向滚动跑马灯效果，通过克隆列表并利用外层Flex容器保持元素水平对齐，但Firefox下嵌套Flex的表现不符合预期。已尝试@-moz-document专属样式、替换为Grid布局等方案，均未解决问题。

复现代码 #

CSS #

.title {
  background: pink;
  text-align: center;
  margin: 0;
}
.titleClone {
  background: blue;
  text-align: center;
  margin: 0;
}
.link {
  display: grid;
  background: green;
  border: black solid 1px;
  writing-mode: vertical-lr;
}
.secondFlex {
  display: flex;
  background: blue;
  height: 200px;
  flex: 0 0 auto;
  height: 100%;
}
.firstFlex {
  display: flex;
  flex-direction: row !important;
  height: 50vh;
}

HTML #

<div class="firstFlex">
  <div class='secondFlex'>
    <a class="link">
      <h2 class='title'>Titler</h2>
    </a>
    <a class="link">
      <h2 class='title'>Shorter Title</h2>
    </a>
    <a class="link">
      <h2 class='title'>This is a much longer title and will wrap into m</h2>
    </a>
    <a class="link">
      <h2 class='title'>This is a really long title that will wrap into multiple lines</h2>
    </a>
    <a class="link">
      <h2 class='title'>This is a really long artist title that will wrap into multiple lines</h2>
    </a>
  </div>
  <div class='secondFlex'>
    <a class="link">
      <h2 class='titleClone'>Titler</h2>
    </a>
    <a class="link">
      <h2 class='titleClone'>Shorter Title</h2>
    </a>
    <a class="link">
      <h2 class='titleClone'>This is a much longer title and will wrap into m</h2>
    </a>
    <a class="link">
      <h2 class='titleClone'>This is a really long title that will wrap into multiple lines</h2>
    </a>
    <a class="link">
      <h2 class='titleClone'>This is a really long artist title that will wrap into multiple lines</h2>
    </a>
  </div>
</div>

修复/绕过方案 #

方案1：强制第二层Flex容器适应内容宽度 #

给.secondFlex添加min-width: max-content，强制容器计算并容纳所有子元素的总宽度：

.secondFlex {
  display: flex;
  background: blue;
  height: 100%;
  flex: 0 0 auto;
  min-width: max-content; /* 新增 */
}

方案2：禁止垂直书写子元素被压缩 #

给.link添加flex-shrink: 0，防止子元素因容器宽度不足被压缩，确保容器能正确识别子元素的实际尺寸：

.link {
  display: grid;
  background: green;
  border: black solid 1px;
  writing-mode: vertical-lr;
  flex-shrink: 0; /* 新增 */
}

方案3：改用inline-flex布局 #

将.secondFlex的display改为inline-flex，让容器根据内容自动调整宽度，同时配合white-space: nowrap避免子元素换行：

.secondFlex {
  display: inline-flex; /* 修改 */
  background: blue;
  height: 100%;
  flex: 0 0 auto;
  white-space: nowrap; /* 新增 */
}

以上方案均针对Firefox在垂直书写模式下Flex容器尺寸计算的Bug设计，可有效解决布局断裂问题，同时保留跑马灯的横向滚动效果。

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