# Manuel Matuzovic: max() Trickery

By way of a post by Manuel Matuzović which is by way of a demo by Temani Afif.

``.wrapper { margin-inline: max(0px, ((100% - 64rem) / 2)); }``

You’d be doing yourself a favor to read Manuel’s breakdown of all what’s happening here, but it basically works out to the equivalent of this longer syntax:

``````.wrapper { max-width: 64rem; margin: 0 auto; width: 100%;
}``````

…where:

• max() acecepts a comma-separated list of CSS numeric values, where the applied value is the largest (or as MDN puts it, the “most positive”) one in the set.
• `0px` is the first value in the set, ensuring that the smallest value is always going to be greater than zero pixels.
• `(100% - 64rem)` is the second “value” in the set, but is expressed as a calculation (note that `calc()` is unnecessary) that subracts the the `max-width` of the element (`64rem`) from its full available `width` (`100%`). What’s left is the space not taken up by the element.
• `((100% - 64rem) / 2))` divides that remaining space equally since we’re divying it between the inline boundaries of the element.
• `max(0px, ((100% - 64rem) / 2))` compares `0px` and `(100% - 64rem) / 2)`. The largest value is used. That’ll be the result of the equation in most cases, but if `64rem` is ever greater than the computed value of the element’s full `100%` width, it’ll lock that value at zero to ensure it never results in a negative value.
• `margin-inline` is the property that the winning value sets, which applies margin to the inline sides of the element — that’s the logical shorthand equivalent to setting the same value to the `margin-left` and `margin-right` physical properties.

It’s the same sort of idea Chris shared a while back that uses the CSS `max()`function to solve the “Inside Problem” — a container that supports a full-bleed background color while constraining the content inside it with `padding`.

`max()`, `calc()`, `margin-inline`… that’s a lot of newfangled CSS! And Manuel is right smack dab in the middle of writing about these and other modern CSS features over 100 days.

This site uses Akismet to reduce spam. Learn how your comment data is processed.