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

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.

---

The post Using max() for an inner-element max-width appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

source https://css-tricks.com/using-max-for-an-inner-element-max-width/