Rather than using the overflow property to control how spilled content displays, is there a way to have the parent element expand or shrink such that it always contains the content?
Yes! In general, if we nest elements within
<section> elements these outer, containing elements will auto-adjust to the height of their content so long as we have not explicitly set the
height of the container itself. Explicitly setting the
height of an element can make our code brittle and for this reason we should use this property with care.
Now, if we would like the width of a container to expand or shrink to match the width of it’s content (a technique known as shrink-wrapping) there are several tactics we can use. One method would be to apply the
display: inline-block; declaration on the containing element itself. The
display property is something you will learn more about in the next Display and Positioning unit!