Reputation: 475
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>
Upvotes: 1
Views: 108