CSS flex item not expanding with content in Firefox with writing-mode: vertical-lr

Question

I am experiencing a specific issue in Mozilla Firefox with flex containers when using writing-mode: vertical-lr. The flex items are not expanding to fit the content, causing the text to overflow.

Goal: My aim is to create a vertically oriented list of titles of varying lengths. Each title is wrapped in an anchor tag, and I want the text to be centered within this tag.

Problem Observed: In Firefox, the width of each flex item remains the same, leading to longer text overflowing its container. This behavior is not observed in other browsers.

What I've Tried:

Experimenting with different flexbox properties. Checking for browser-specific CSS differences.

Relevant Code:

.title {
  writing-mode: vertical-lr;
  background: pink;
  text-align: center;
}
.link {
  display: grid;
  background: green;
  border: black solid 1px;
}
.wrapper {
  display: flex;
  background: blue;
  height: 200px;
}

<div class='wrapper'>
  <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>

If you open this code in FireFox you will see the issue.

Questions:

Why do flex items in Firefox not adjust their width according to the content size when using writing-mode: vertical-lr?

What are the possible solutions to ensure the flex item grows with its vertical content in Firefox?

I want to keep the 'grid' property each each flex item if possible, as this has prevented some weird rendering issues with the vertical writing mode in firefox.

Answer 1

Move the writing-mode to the link instead. This seems to solve the issue (tested in FF Nightly)

.title {
  background: pink;
  text-align: center;
}

.link {
  display: grid;
  writing-mode: vertical-lr;
  background: green;
  border: black solid 1px;
}

.wrapper {
  display: flex;
  background: blue;
  height: 200px;
}

<div class='wrapper'>
  <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>