calc() mixes units the layout otherwise cannot

CSS has no other way to say “the full width minus the sidebar” when one side is a percentage and the other is fixed. The old answers were a wrapper element with negative margins, or computing it in JavaScript and re-computing on resize.

.content {
    width: calc(100% - 240px);
}

.modal {
    top: calc(50% - 12rem);
    max-height: calc(100vh - 4rem);
}

The whitespace around the operators is required — calc(100%-240px) is invalid and silently drops the whole declaration. It nests and it works anywhere a length is accepted, including inside media feature values in newer browsers. Support is good enough now that the fallback is usually just a plain declaration before it.