1

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?

Chrome 103 & Safari 15 Firefox 103
text is contained text overflows 

.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>
Ben Larson
  • 404
  • 1
  • 5
  • 11
  • I found [an open bug in Bugzilla](https://bugzilla.mozilla.org/show_bug.cgi?id=1767091) that appears to be related. "We probably behave as we do because, for the vertical-WM element, an 'auto' width is unresolvable without actually fully laying out its contents, and we haven't done that yet at the point where we're deciding where it will go with respect to potentially-colliding floats." It seems Firefox waits a weirdly long time to determine the width of `writing-mode: vertical-rl` elements, while other browsers do not. – Ben Larson Aug 02 '22 at 00:17

0 Answers0