Fitting a div to a multiline text span [duplicate] - html

Question

This question already has answers here:
CSS when inline-block elements line-break, parent wrapper does not fit new width
(2 answers)
Closed 1 year ago.
I have run into this problem:
span {
width: fit-content;
background-color: yellow;
}
div {
width: fit-content;
border: black 1px solid;
max-width: 100px;
}
<div>
<span>Fooooo Barrrrrrrr</span>
</div>
<p>The right side border should be touching the right side of the longest line.</p>
I would like the div to be as close to the size of the span as possible. I have put width: fit-content; there but it seems to only fit to its own max-width. I am not asking to fit the div to the boundries of every line, but it should be as wide as the widest line in span. How can I resolve this?

Answer 1

Try with this:
.customblk span {
background-color: yellow;
}
.customblk div {
border: black 1px solid;
max-width: max-content;
}
<section class="customblk">
<div>
<span>Fooooo Barrrrrrrr </span>
</div>
<p>The right side border should be touching the right side of the longest line.</p>
</section>

Answer 2

Here you can use min-content, or if you don't want the words to break you can use max-content only on the div and let the span have auto width (it's the default, so no need to explicitly set it). Note that your CSS will influence all divs on your page, so to test this you need to set unique classes or ids to not have the first css influence the second css.
span.span1 {
width: fit-content;
background-color: yellow;
}
div.div1 {
width: min-content;
border: black 1px solid;
max-width: 100px;
}
span.span2 {
background-color: yellow;
}
div.div2 {
border: black 1px solid;
width: max-content;
}
<div class="div1">
<span class="span1">Fooooo Barrrrrrrr</span>
</div>
<br>
<div class="div2">
<span class="span2">Foooooo Barrrrrrrrrr</span>
</div>