我在Firefox中遇到了一些奇怪的问题，嵌套的flex元素和垂直书写模式。
看看Firefox中的this CodePen，这是一个最小的设置，您将看到Firefox在嵌套的flex父级的内容大小方面存在问题。看起来这实际上是Firefox中的一个bug。

解决您的案例和问题：

1.你正在使用CSS嵌套。请注意，这只是supported from Firefox Version 117，大多数用户还无法使用（截至目前）。
1.我不认为使用inline-flex对您的目标是必不可少的，所以我将内联flex元素更改为flex。

• 正如我上面提到的，Firefox似乎有嵌套的flex元素和设置为垂直的书写模式。
• 通常情况下，对于其中一个容器元素使用display: grid;而不是flex是可以的，因为在大多数情况下，您可以使用CSS Grid实现相同的结果。不幸的是，在您的特定情况下，我无法让它与Grid一起工作。
• 我发现在Firefox的开发工具中禁用并重新启用flex-flow属性可以解决这个问题。我的猜测是，这是在浏览器中触发样式重新计算。因此，我编写了以下JavaScript，通过删除CSS属性并将其添加回相应的元素，重现了禁用和重新启用CSS属性的行为：

function fixFlexBug() {
  const elements = document.querySelectorAll(".group > div");

  elements.forEach((element) => {
    const flexFlowValue = window.getComputedStyle(element).getPropertyValue("flex-flow");

    // temporarily reset the "flex-flow" property to "initial"
    element.style.flexFlow = "initial";

    // trigger a reflow by accessing the offsetWidth property
    // this ensures that changes to styles are immediately applied
    void element.offsetWidth;

    // restore the original "flex-flow" property value
    element.style.flexFlow = flexFlowValue;
  });
}

window.addEventListener("load", fixFlexBug);

字符串
我知道这是一个非常黑客解决方案，但它似乎解决了Firefox中的问题;至少现在
以下是经过调整的CSS：

.wrapper {
    max-width: 90vw;
}

.header {
  flex-wrap: wrap;
  display: flex;
  flex-flow: row wrap;
  writing-mode: vertical-lr;
  max-height: 55vh;
}

.group {
  display: flex;
  flex-direction: row;
}

.group > div {
  display: flex;
  flex-flow: row wrap;
}

.groupHeader {
    padding-left: 5px;
    margin: 0 0 10px 0;
    writing-mode: horizontal-tb;
    font-style: italic;
 }

.section {
    writing-mode: horizontal-tb;
 }

.navMenuLink {
  writing-mode: horizontal-tb;
  padding: 0 0.5rem;
  margin: 0 0.5rem;
}

h4 {
  margin: 0;
}

型