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

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 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…