Ben Larson
Ben Larson

Reputation: 475

Can an inline-flex element adjust to the width of a vertical-rl child element in Firefox?

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>

Upvotes: 1

Views: 108

Answers (0)

Related Questions