Currently `calc` can't do division with units, but it should change soon (Chrome 140, Safari 18.2, no info about FF).
Anyway, in current state of css (Chrome 111+, FF 108+, Safari 15.4+) you can make the division by replacing `calc(1em / 1rem)` by `tan(atan2(1em, 1rem))` unless you need dividing by percent:
<!-- begin snippet: js hide: false console: true babel: false babelPresetReact: false babelPresetTS: false -->
<!-- language: lang-css -->
p {
margin-left: calc(tan(atan2(100vw - 624px, 144px)) * 20%);
}
<!-- language: lang-html -->
<p>Hi!</p>
<!-- end snippet -->
Currently `calc` can't do division with units, but it should change soon (Chrome 140, Safari 18.2, no info about FF).
Anyway, in current state of css (Chrome 111+, FF 108+, Safari 15.4+) you can make the division by replacing `calc(1em / 1rem)` by `tan(atan2(1em, 1rem))` unless you need dividing by percent:
<!-- begin snippet: js hide: false console: true babel: false babelPresetReact: false babelPresetTS: false -->
<!-- language: lang-css -->
body {
width: 50%;
border: 1px dotted red;
}
p {
background: silver;
width: calc(tan(atan2(1em, 1rem)) * 100%);
}
<!-- language: lang-html -->
<p style="font-size: smaller">smaller</p>
<p>normal</p>
<p style="font-size: larger">larger</p>
<!-- end snippet -->
PS: Got it here: https://youtu.be/ZDFgJeQOn20?t=846
If you need to divide by percent width concider using container and replaceing `%` with `cqi`:
<!-- begin snippet: js hide: false console: true babel: false babelPresetReact: false babelPresetTS: false -->
<!-- language: lang-js -->
console.log(document.querySelector('p').clientWidth)
<!-- language: lang-css -->
body {
width: 500px;
}
main {
container-type: inline-size;
outline: 1px dotted red;
}
p {
width: calc(100% * (.7 - tan(atan2(120px, 100cqi))));
background: silver;
}
<!-- language: lang-html -->
<main>
<p>Hi!</p>
</main>
<!-- end snippet -->
