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.