calc() computes at render time, even mixing units: width: calc(100% - 240px) for a main area beside a fixed sidebar, or calc(var(--gap) * 2). Whitespace around operators is required. It's the glue between flexible and fixed sizing.
calc() computes at render time, even mixing units: width: calc(100% - 240px) for a main area beside a fixed sidebar, or calc(var(--gap) * 2). Whitespace around operators is required. It's the glue between flexible and fixed sizing.
<!doctype html><html><head><meta charset="utf-8">
<style>.side{width:200px;float:left;background:#1c1240}.main{width:calc(100% - 200px);float:left;background:#140a28}.side,.main{color:#e6e0ff;padding:16px;box-sizing:border-box}</style></head><body style="background:#06040d;padding:20px"><div class="side">200px</div><div class="main">calc fills the rest</div></body></html>