0

In the following snippet, the text in the first box will wrap. However, the width of the box is wider than necessary. How can the width be limited to the actual width of the wrapped text?

.outer {
  width: 120px;
}
.inner {
  display: flex;
}
.item {
  flex: 0 1 auto;
  font-size: 20px;
  border:1px solid #000;
  background-color: #3ff;
}
<div class="outer">
  <div class="inner">
    <div class="item">The quick brown fox</div>
  </div>
  <div class="inner">
    <div class="item">Hello world</div>
  </div>
</div>
Andrew Parks
  • 6,358
  • 2
  • 12
  • 27
  • @DBS thanks - I've been looking over lots of questions like that, but I'm still not sure if the answer is that it simply isn't possible without Javascript, since some of the non-accepted answers claim it is possible with CSS (yet I'm so far unable to apply those answers to this situation) – Andrew Parks Sep 05 '22 at 09:16

0 Answers0