How can I make a div not larger than its contents?

Question

I have a layout similar to:

I would like for the div to only exp

Answer 1

Try to use width: max-content property to adjust the width of the div by it's content size.

Try this example,

This div element has width 500px;


Width by content size