Confining child divs to auto width of parent div -- HOW?

[OhMonty]

I’m trying to do something very simple, but for the life of me cannot figure out how, even though I’m not a CSS novice. All I want is to include a caption underneath a photo that wraps and is confined to the width of the photo. Here’s the code for the image and caption:

<div style="display: inline-block; float: right; width: auto; margin: 0 0 1rem 1rem;">
	<img src="photo.jpg" alt="photo">
	<div>Long hoto caption lorem ipsum dolor sit amet, sit ne appareat verterem, an semper labores reprehendunt sea ipsum dolor. </div>
</div>

But this is what it produces:

---

---

If the caption is longer than the width of the photo, the parent div expands to accommodate the long caption. But what I want to happen is that the caption stay confined to the width of the photo in the parent div and wrap the text accordingly.

The only way this seems possible is to add a specific width to the parent div, but I want this to be dynamic so it works for any size photo which is why I use width:auto. I also tried defining the display as a table like this:

<div style="display: table; float: right; margin: 0 0 1rem 1rem;">
	<div style="display: table-cell;">
		<img src="photo.jpg" alt="photo">
		<div>Long hoto caption lorem ipsum dolor sit amet, sit ne appareat verterem, an semper labores reprehendunt sea ipsum dolor. </div>
	</div>
</div>

But no difference, the caption still stretches the width of the parent div. I also tried using width:fit-content and width:intrinsic on the parent div and the caption div, but it doesn’t change anything.

Is there really no way to do this with CSS? I’m a big shocked that something this simple seems impossible.

[PaulOB]

Use display:table with a width of 1% and the element will expand to the width of the image (or the largest unbroken content) but no further.

Semantically you should be using figure and figcaption elements but the technique is the same.

[OhMonty]

Thanks, Paul, that did the trick! I’ll also use the figure and figcaption elements instead of divs as you suggested.

I wish there was a more responsive way to make this work. If I use this in Bootstrap with the img-fluid tag, the image is tiny if I specify width:1px on the container. But I found a workaround, I’m able to determine the width of the photo being displayed, so instead I used max-width:510px (or whatever the photo width is) which allows the image to scale down on smaller displays.

But if you don’t know the width of the photo, the width:1px option works pretty well.

[PaulOB]

Yes there can be problems when you have a circular reference. i.e. If you want the image to be a percentage of its container but the container’s width is depending on the size of the image then you have a problem that can’t really be resolved.

There is a css property called min-content which can do the same as the method I have shown but support is patchy.

The width:1px on the display:table element is actually a tried and tested method from the end of last century when actual html tables were used for layout