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

Avatar of Chris Coyier
Chris Coyier on

Find and fix web accessibility issues with ease using axe DevTools Pro. Try for free!

I go into all this in The “Inside” Problem. The gist: you want an edge-to-edge container, but the content inside to have a limited width. I think there is absolutely no problem using a nested element inside, but it’s also fun to look at the possibilities of making that work on a single element.

My favorite from that article is this one that calculates padding for you:

While calc() does indeed do the trick, it doesn’t allow you to have a minimum padding. Well, max() does. I still find it hella confusing that we reach for max() when we want a minimum value but, hey, just gotta build that muscle memory.

Reader Caluã de Lacerda Pataca responded to our last newsletter where we mentioned these functions with a this clever idea:

Now we can make sure that the content doesn’t smash up against the edges no matter what.