The "height: auto" CSS property automatically adjusts an element’s height based on its content. It defines an element’s new height by expanding or contracting to accommodate the size of its content. This accommodation helps when an element's content — such as an image or a text box — varies in height and needs to adjust to its surroundings.
For example, if an element contains text, applying the auto height property adjusts the container to accommodate the amount. However, defining a fixed height — such as height: 100px — won’t change the container’s size regardless of the amount of text it holds, which can lead to overflow and cutoff.
Proper height and size settings ensure all content is visible and easy to use. Head to Webflow University to learn more about height, width, and automatic sizing to avoid overflow and create websites with increased readability.
.jpeg)
