CSS グリッドに基づいた 2 列のレイアウトがあります。 2 列目の内容が 1fr を超えた場合に新しい行を作成したいと考えています。現状では、コンテンツが単に列から溢れてしまいます。

このレイアウトの要件の 1 つは、右メニュー 列の項目が 1 行にあることです。これは次のようにして実現します:

.right-menu { ... グリッド自動フロー: 列密度。 ... }

grid-auto-flow 属性を削除すると、オーバーフローが停止します。ただし、アイテムは複数の行に積み重ねられており、これは私が望むものではありません。

.right-menu を

.right-menu { 表示: 'インラインフレックス'; }

しかし、結果は前と同じです。コンテンツが列をオーバーフローします。 JavaScriptを使わずにこれを行う方法はありますか?メディア クエリはビューポートの幅ではなくコンテンツに基づいているため、非推奨になりました。

.main-container { 背景色: #ccc; パディング: 1.0rem; 幅: 1200ピクセル; マージン: 1.0レム 0 0 1.0レム; } .menu-grid { 表示: グリッド; グリッド テンプレート列:repeat(auto-fill, minmax(600px, 1fr)); グリッドテンプレート行:repeat(auto-fill, 1fr); グリッド自動フロー: 行; グリッド行ギャップ: 1.0rem; } .left-menu { フォントサイズ: 1.25rem; } .right-menu { 表示: グリッド; 背景色: 白; グリッド テンプレート列:repeat(auto-fill, minmax(65px, 1fr)); グリッド自動フロー: 列密度。 グリッド行ギャップ: 0.5rem; グリッド列ギャップ: 0.75rem; } .right-item { 背景色: #fff; テキスト整列: 中央; 最小幅: 65px; 境界線: 1 ピクセルの黒一色。 }

 
 
左
 
 
アイテム: 1
 
項目: 2
 
アイテム: 3
 
アイテム: 4
 
アイテム: 5
 
アイテム: 6
 
アイテム: 7
 
アイテム: 8
 
アイテム: 9
 
アイテム: 10
 
アイテム: 11
 
アイテム: 12
 
項目: 13