1 Thing A Week 1 Thing
A Week

Getting my head around the CSS minmax() function

Week 202.0 — 6th September '21

I recently took a look at the min() function in CSS, I expected to move on to the max() function but came across the minmax() function which looked like it was worth diving in to.

Getting my head around this function seems to be a lot easier. For one, you simply specify a min and a max value (in that order) and then CSS will use those values to make it at least the minimum size, but no bigger than the maximum size. The one caveat to that is when max < min and then the function falls back to the minimum value.

When is max < min?

You might be wondering when exactly the max value could be smaller than the min value. You could of course specify that explicitly with the lengths you choose but it's more likely to be a scenario where the keywords min-content or max-content are used.

If you use max-content, the box will stretch to fit the content stretching to the maximum size needed. min-content will take opportunities to line break as often as it can, being the minimum size required to keep a full-word on a single line.

If you combine this with the minmax() function, you end up with the ability to grow dynamically with your content (or in spite of it).

min(), minmax(), max(), clamp()

For responsive content, it's another really useful function that now comes native to CSS and I'll be looking at both max() and clamp() in the coming weeks.

Once I've covered them all, I will look at putting an interface together that max really good use of them for the layout and for typography.

More from 1 Thing A Week
« How to implement the Web Share API on your website Apple delays iOS 14's anti-tracking features until 2021 Food Wars Filling the gap between gas and electric cars: PHEVs »

Advertisement

Notable

Quick links and commentary on interesting articles, videos and more throughout the week.

  1. 202.2 – Tuesday
    1. Oh my fucking God, get the fucking vaccine already, you fucking fucks Wendy Molyneux on mcsweeneys.net
  2. 202.4 – Thursday
    1. "The Matrix Resurrections" trailer Warner Bros. Pictures on youtube.com
  3. 202.5 – Friday
    1. The Guy Who Decides Netflix Jimmy Rees on youtube.com
    2. Driving 1000 Miles in 3 Cars: Gas vs Electric! Marques Brownlee on youtube.com
  4. 202.6 – Saturday
    1. Facebook and Ray-Ban ‘Smart' glasses pxlnv.com

Jump to notable items for Week #201, Week #203 , view the notable archive or my favourites.

About 1 Thing A Week

A website curated by @cchana bringing you 1 Thing A Week, delivered every Monday morning.

You can find a list of all articles in the archive, or read the most popular.

Find out more about 1 Thing A Week or read the privacy policy.

Market

Visit the market and support 1 Thing A Week.

You can find 1 Thing A Week on Twitter, Facebook, Instagram & Reddit