Using max() for an inner-element max-width

Calculating Padding With max() for Edge-to-Edge Layouts

Building a container that spans the full width of a viewport while keeping the inner content restrained to a maximum width often leads to a nested element approach. That works perfectly fine, though handling it on a single element also offers interesting possibilities.

A previously suggested technique used calc() to derive dynamic padding based on the viewport width. While effective, that method lacks a mechanism to enforce a minimum amount of padding. Reaching for max() in this case might feel counterintuitive—since it generally produces a larger, not smaller, value—but it enables exactly that safeguard.

A reader responding to a recent newsletter highlighted an elegant alternative that pairs max() with the existing formula. The key advantage is that no matter how narrow the viewport becomes, the content never collides with the container edges because the padding always respects a baseline.