CSS 変数の calc は遅延評価されてる
◆ calc(100% - 100px) を CSS 変数に入れておいても 100% は使った場所のもの
◆ 変数を定義した要素の 100% にならない
◆ 変数を定義した要素の 100% にならない
CSS 変数と calc を使えばけっこう色々できるかなと思ったのですがそうは行きませんでした
こういう HTML を用意します
DEMO
1 の div は 500px で その内側の 2 の div では --x に 「100% - 100px」 を設定しています
1 が 500px なので 2 の 100% は 500px で つまり --x は 400px というのが期待する値です
2 の内側の 3 では 300px にしてさらに内側の 4 では --x を設定します
1 = 500px
2 = 500px
3 = 300px
4 = 400px
となるのが期待結果だったのですが こうなりました
4 は 3 より小さいです
サイズ的には 3 より 100px 小さい 200px になってます
calc は事前に計算済みの値が代入されると思っていたのですが その場では計算されず計算式として代入されて使われるところでその計算式が計算されるようです
なので --x を使った 4 の width で 「100% - 100px」 が計算され 4 の 100% は 3 のサイズである 300px なので 200px が表示されたというわけです
calc と CSS 変数を使って body で 「100vw - 100%」 を --scroll-size に入れておけば どこでもスクロールバーの幅が calc に使えて便利と考えたのですが 結局使えませんでした
そろそろ Edge は Chromium 系になってブラウザの種類が Chromium 系と Safari と Firefox くらいになるわけですし Chrome と Safari で動く 「::-webkit-scrollbar」 で幅を Firefox のものに合わせれば全ブラウザで同じ幅にできる……のかな
こういう HTML を用意します
<body>
<div style="
width: 500px;
background: tomato;
">
1
<div style="
--x: calc(100% - 100px);
background: skyblue;
">
2
<div style="
width: 300px;
background: mistyrose;
">
3
<div style="
width: var(--x);
background: lightgreen;
">4</div>
</div>
</div>
</div>
</body>
DEMO
1 の div は 500px で その内側の 2 の div では --x に 「100% - 100px」 を設定しています
1 が 500px なので 2 の 100% は 500px で つまり --x は 400px というのが期待する値です
2 の内側の 3 では 300px にしてさらに内側の 4 では --x を設定します
1 = 500px
2 = 500px
3 = 300px
4 = 400px
となるのが期待結果だったのですが こうなりました
4 は 3 より小さいです
サイズ的には 3 より 100px 小さい 200px になってます
calc は事前に計算済みの値が代入されると思っていたのですが その場では計算されず計算式として代入されて使われるところでその計算式が計算されるようです
なので --x を使った 4 の width で 「100% - 100px」 が計算され 4 の 100% は 3 のサイズである 300px なので 200px が表示されたというわけです
calc と CSS 変数を使って body で 「100vw - 100%」 を --scroll-size に入れておけば どこでもスクロールバーの幅が calc に使えて便利と考えたのですが 結局使えませんでした
そろそろ Edge は Chromium 系になってブラウザの種類が Chromium 系と Safari と Firefox くらいになるわけですし Chrome と Safari で動く 「::-webkit-scrollbar」 で幅を Firefox のものに合わせれば全ブラウザで同じ幅にできる……のかな