CSS property "writing-mode: vertical-lr" has issues with flex-box in Firefox

Question

I am having an interesting issue where I am building a dynamic navigation menu that is not rendering its contents correctly in Firefox (v114.01). It renders fine on both Edge (v114.0.1823.43) and Chrome (v114.0.5735.134).

It seems like the "writing-mode: vertical-lr" property is being applied differently in Firefox.

The reason why I am using writing-mode is to overcome the issue of flex box wrapped columns not growing its width When flexbox items wrap in column mode, container does not grow its width. Again, this seems to work fine in Edge/Chrome but not Firefox.

Here is a code pen with an example: https://codepen.io/Jean-Paul-Larach/pen/vYQNRPY

.wrapper {
  display: flex;
  flex-direction: row;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-right: 0px;
  max-width: 90vw;
}

h4 {
  margin: 0;
}

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

.groupHeader {
  padding-top: 0px;
  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;
}

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

<div class="wrapper">
  <div style="padding-right: 15px; overflow-x: auto;">
    <div class="header">
      <div class="group">
        <h3 class="groupHeader">Groups</span>
        </h3>
        <div>
          <div class="section">
            <h4><span><b>Group 1</b></span></h4>
          </div><a class="navMenuLink">Child 1</a>
          <div class="section">
            <h4><span><b>Group 2</b></span></h4>
          </div><a class="navMenuLink">Child 1</a><a class="navMenuLink">Child 2</a><a class="navMenuLink">Child 3</a><a class="navMenuLink">Child 4</a><a class="navMenuLink">Child 5</a>
          <div class="section">
            <h4><span><b>Group 3</b></span></h4>
          </div><a class="navMenuLink">Child 1</a><a class="navMenuLink">Child 2</a><a class="navMenuLink">Child 3</a><a class="navMenuLink">Child 4</a><a class="navMenuLink">Child 5</a><a class="navMenuLink">Child 6</a><a class="navMenuLink">Child 7</a>
          <div class="section">
            <h4><span><b>Group 4</b></span></h4>
          </div><a class="navMenuLink">Child 1</a><a class="navMenuLink">Child 2</a>
        </div>
      </div>
      <div>
        <div role="separator" aria-orientation="vertical"></div>
      </div>
      <div class="group">
        <h3 class="groupHeader"><span>Sites</span></h3>
        <div>
          <div class="section">
            <h4><span><b>Group 1</b></span></h4>
          </div><a class="navMenuLink">Child 1</a><a class="navMenuLink">Child 2</a><a class="navMenuLink">Child 3</a><a class="navMenuLink">Child 4</a><a class="navMenuLink">Child 5</a><a class="navMenuLink">Child 6</a><a class="navMenuLink">Child 7</a>
          <a class="navMenuLink">Child 8</a><a class="navMenuLink">Child 9</a><a class="navMenuLink">Child 10</a>
        </div>
      </div>
    </div>
  </div>
</div>

Edge Screenshot:

Firefox Screenshot:

Any guidance or feedback will be much appreciated!

I tried to change my code to use other types of layouts but that presented many challenges. Flexbox should be the choice for creating navigation.

glmvc · Answer 1 · 2023-08-12T19:13:44.593

Edit: I've filed this bug report in the hope that it will fix the issue described.

I had some weird issues in Firefox with nested flex elements and vertical writing-mode in the past.
Take a look at this CodePen in Firefox, which is a minimal setup, and you will see that Firefox has problems with the content size of the nested flex parent. It looks like this is actually a bug in Firefox.

To address your case and problem:

You're using CSS nesting. Note that this is only supported from Firefox Version 117, which is not yet available to most users (as of today).
I don't think that using inline-flex is essential for your goals, so I changed the inline flex elements to flex.
As I mentioned above, it seems that Firefox is buggy with nested flex elements and writing-mode set to vertical.
- Usually it's fine to use display: grid; instead of flex for one of the container elements, because in most cases you can achieve the same result with CSS Grid. Unfortunately, I couldn't get it to work with Grid in your particular case.
- I found that disabling and re-enabling the flex-flow property in Firefox's dev tools somehow fixes the problem. My guess is that this is triggering a style recalculation in the browser. So I wrote the following JavaScript that reproduces this behavior of disabling and re-enabling a CSS property by removing the property and adding it back to the appropriate elements:

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);

I know that this is a very hacky solution, but it seems to fix the issue in Firefox; at least for now...

Here is the adapted 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;
}

CSS property "writing-mode: vertical-lr" has issues with flex-box in Firefox

1 Answers1

To address your case and problem: