1 Thing A Week 1 Thing
A Week

The CSS max() function Learning more about how to size elements using CSS functions

Week 207.0 — 11th October '21

CSS' min(), minmax() and max() functions are still taking me some time to get my head around. Mostly because I'm not using them yet but I'm trying to look at them as often as possible in the hope that they click. Their names are counterintuitive to me, but they're usefulness outlays that... I think.

width: max(50vw, 800px);

In this example, the item will be at least 800px wide, but will grow to be 50vw wide. Just like with the min() function, the two properties work together to define how wide an element would be. At some point, 800px an 50vw are the same. With min() we would see the image grow until it hits that point, with max() it is a static size until then. After, it's start growing to fill us much space as possible. CSS treats 1vw as 16px (800 / 50) in this example which means that 100vw would be 1600px.

Click through to the demo on Codepen and resize your browser. You'll see the image is always at least 800px wide and never less than half the size (50vw).

More from 1 Thing A Week
« The <var> and <samp> elements in HTML Ted Lasso

Advertisement

Notable

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

  1. 207.1 – Monday
    1. Google Apps for iOS to switch to UIKit after decade of Material Design macrumors.com
  2. 207.2 – Tuesday
    1. What dinosaurs ACTUALLY looked like Kurzgesagt on youtube.com

Jump to notable items for Week #206 , 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