Свойство CSS «режим записи:вертикальный-lr» имеет проблемы с гибким полем в Firefox. ⇐ CSS

[Anonymous]

У меня возникла интересная проблема: я создаю динамическое навигационное меню, содержимое которого неправильно отображается в Firefox (v114.01). Он отлично отображается как в Edge (v114.0.1823.43), так и в Chrome (v114.0.5735.134).Похоже, что свойство «writing-mode:vertical-lr» используется применяется по-другому в Firefox.
Причина, по которой я использую режим записи, состоит в том, чтобы решить проблему, когда столбцы, обернутые гибким блоком, не увеличивают свою ширину. Когда элементы флексбокса переносятся в режиме столбца, контейнер не увеличивается. увеличить его ширину. Опять же, похоже, это работает нормально в Edge/Chrome, но не в Firefox.
Вот код с примером: 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;
}

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

Groups



[h4]Group 1[/b][/h4][b]          Child 1

[h4]Group 2[/b][/h4][b]          Child 1Child 2Child 3Child 4Child 5

[h4]Group 3[/b][/h4][b]          Child 1Child 2Child 3Child 4Child 5Child 6Child 7

[h4]Group 4[/b][/h4][b]          Child 1Child 2






Sites


[h4]Group 1[/b][/h4]
Child 1Child 2Child 3Child 4Child 5Child 6Child 7
Child 8Child 9Child 10

Скриншот по краям:



Firefox Скриншот:



Будем очень признательны за любые рекомендации и отзывы!
Я пытался изменить свой код, чтобы использовать другие типы макетов, но это создало множество проблем. Flexbox должен быть выбором для создания навигации.

Подробнее здесь: https://stackoverflow.com/questions/764 ... in-firefox