CSS Flex Item не расширяется с контентом в Firefox с режимом письма: Vertical-LR ⇐ Html

[Anonymous]

Я переживаю конкретную проблему в Mozilla Firefox с гибкими контейнерами при использовании режима письма: вертикальный LR. Исключенные элементы не расширяются, чтобы соответствовать контенту, что приводит к переполнению текста. Каждый заголовок обернут в якорный тег, и я хочу, чтобы текст был центрирован в пределах этой тег. /> В Firefox ширина каждого изгиба остается неизменной, что приводит к более длинному тексту, переполнению его контейнера. Такое поведение не наблюдается в других браузерах.
Что я пробовал:
Экспериментирование с различными свойствами Flexbox.
Проверка для браузера-специфических различий CSS. class = "Snippet">

Код: Выделить всё

.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;
}< /code>


Titler


Shorter Title


This is a much longer title and will wrap into m


This is a really long title that will wrap into multiple lines


This is a really long artist title that will wrap into multiple lines

Если вы откроете этот код в Firefox, вы увидите проблему. /> Каковы возможные решения для обеспечения роста гибкого элемента с его вертикальным содержанием в Firefox?>

Подробнее здесь: https://stackoverflow.com/questions/776 ... e-vertical