Making sense of max(calc((100vw - 1200px)/2 + max(3%,20px)),55px)

Kenton de Jong
Geek Culture
Published in
3 min readMay 15, 2021

--

Try saying that 5 times fast.

CSS has changed a lot since I first learned it in 2010. When I started, very little of the above would make sense. Today, however, not only does it make sense, but it works. At least, mostly.

(We are talking about CSS here.)

The situation that birthed the above monster started when I inherited a project from a former developer. The main width of the website was 1200px wide, but this particular section was unique. It was a two-column layout with the right column being 40% of the screen width and the left column being 60%. The content inside the left column would have to match the width of the rest of the site. It’s easier to visualize than to explain:

The things we put up with when we do web dev.

The developer I inherited this problem from fixed this issue by creating ~16 media queries to adjust the size of the “???” section. Although it worked, that was not necessary. Instead, we can use CSS to figure it out.

To begin, we need to get the full width of the screen. This can be best captured with 100vw which is 100% of the viewport.

We then subtract the width of our site. In our example, it is 1200px wide. To do…

--

--

Kenton de Jong
Geek Culture

I am a web developer turned travel blogger that is forced to code to eat.