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?

Question

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?

Answer

Yes! In general, if we nest elements within <div> or <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!