固定幅で最大幅 90% のグリッドの子がグリッド トラックからオーバーフローするのはなぜですか?

Question

＃＃＃＃＃＃質問：＃＃＃

私の質問は非常に単純です。

.header

要素がビューポート幅 1500 ピクセルに達するとグリッド トラックからオーバーフローする理由を知りたいです。

コード:

リーリー リーリー

私が望む効果:

私のアイデアは、

.header

要素の幅を 1500 ピクセルにすることです。スペースが不十分な場合は、

.header がグリッド トラックの 90% を占める必要があります。 私が試したこと:

width: min(1500px, 90%)

を設定し、

.header 要素の max-width を削除することで、この効果を実現できましたが、何が起こったのか正確にはわかりません。グリッドトラックはコンテンツの幅に基づいて幅を計算していると思います。現時点では、1fr の正確な意味はわかりません。 ＃＃＃私の考え：＃＃＃ グリッドは素晴らしいと誰もが言いますが、Flexbox の暖かさを離れると、いつも問題が発生します。

Answer 1

これには 90% の代わりに 90vw を使用するとうまくいくようです

リーリー リーリー