オーバーフロー時にグリッド列のサイズ変更が遅れる

Question

固定位置を使用してブラウザのビューポートを満たす 2×2 CSS グリッドがあります。次のようになります:

リーリー

上の行と左の列はそれぞれコンテンツに適合し、サイズは auto です。一番下の行と右の列は残りのスペースを占めるために使用され、それぞれサイズ 1fr になります。

北東セルと南西セル (画像では X で塗りつぶされています) は両方ともスクロール可能な Flex 親セルです。これらには任意の数の子要素が含まれており、その数は動的に変更される可能性があります。各プロパティの overflow プロパティを auto に設定し、次のルールセットを使用してスクロールバーのスタイルを設定します。 リーリー

macOS 上の Chrome でページをロードすると、スクロールバーが南西のセルの内容をオーバーレイします。次に、ブラウザ ウィンドウのサイズを変更すると、左側の列がスクロールバー (すでにオーバーレイとして表示されている) に合わせて拡大され、コンテンツの右側に移動します。

スクロールバーがコンテンツをまったく覆わないようにしたいのですが、無関係なサイズ変更イベントによるレイアウトの移動を本当に排除したいと考えています。どうすればこれらの目標を達成できるか知っていますか?

このコードペンは、再現可能な最小限の例です。しかし、それは私には一貫性がありません。ページをリロードすると、スクロールバーが隠れてしまう場合や、スクロールバーがコンテンツの右側に表示されるほど列の幅が広い場合があります。この独立したページでは、間違ったカバレッジとサイズ設定がより一貫していることがわかります。

Answer 1

これを防ぐには、グリッドの寸法を更新し、スクロールバーを考慮する必要があります。もう 1 つの質問は、CSS のみを使用してこれを行う方法です。 grid-template-columns に animation を適用することを考えましたが、うまくいくようです:

リーリー リーリー

---

JavaScriptを使用したい場合:

リーリー リーリー リーリー