オーバーフロー時にグリッド列のサイズ変更が遅れる
固定位置を使用してブラウザのビューポートを満たす 2×2 CSS グリッドがあります。次のようになります:
リーリー上の行と左の列はそれぞれコンテンツに適合し、サイズは auto です。一番下の行と右の列は残りのスペースを占めるために使用され、それぞれサイズ 1fr になります。
北東セルと南西セル (画像では X で塗りつぶされています) は両方ともスクロール可能な Flex 親セルです。これらには任意の数の子要素が含まれており、その数は動的に変更される可能性があります。各プロパティの overflow プロパティを auto に設定し、次のルールセットを使用してスクロールバーのスタイルを設定します。
リーリー
スクロールバーがコンテンツをまったく覆わないようにしたいのですが、無関係なサイズ変更イベントによるレイアウトの移動を本当に排除したいと考えています。どうすればこれらの目標を達成できるか知っていますか?
このコードペンは、再現可能な最小限の例です。しかし、それは私には一貫性がありません。ページをリロードすると、スクロールバーが隠れてしまう場合や、スクロールバーがコンテンツの右側に表示されるほど列の幅が広い場合があります。この独立したページでは、間違ったカバレッジとサイズ設定がより一貫していることがわかります。
