Maximum height (max height)
The “max-height” CSS property defines an element’s maximum height. Height properties in CSS ensure elements, such as images, text boxes, and other containers don't extend beyond a set height limit, preventing content from overflowing or cutting off.
Limiting an element’s vertical size also adapts responsive content to different devices, screen sizes, and orientations, improving site readability. It does not, however, affect assets smaller than an element's maximum height.
Here’s an example code snippet of a CSS max-height property:
.container {
max-height: 100px;
}
The container restricts the height to a maximum of 100 pixels, ensuring that the element won’t exceed this limitation, maintaining a uniform size.
Learn how to set sizing to any block-level CSS element and prevent overflow on your webpages. Visit Webflow University for additional margins, spacing, and padding lessons to improve your website’s appearance and usability.
