I have a div with display: inline-flex that contains a div with vertical text using writing-mode: vertical-rl. In Chrome and Safari, the outer div expands to fit the width of the inner div, but in Firefox the width of the outer div collapses to 0 and the inner div overflows. Is there a cross-browser way to make the outer div respect the width of the inner div?
.outer {
display: inline-flex;
border: 2px solid black;
}
.inner {
border: 2px dotted black;
}
.vertical {
writing-mode: vertical-rl;
}
<div class="outer">
<div class="inner">Hello world</div>
</div>
<br />
<div class="outer">
<div class="inner vertical">Hello world</div>
</div>

