CSS グリッド: 子コンテンツが列幅をオーバーフローした場合に新しい行を作成する

Question

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

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

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

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

.right-menu を

に変更してみました。

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

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

<code>.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 ピクセルの黒一色。
}</code>

<code><div class="main-container">
    <div class="メニューグリッド">
        <div class="left-menu">左</div>
            <div class="右メニュー">
                <div class="right-item">アイテム: 1</div>
                <div class="right-item">項目: 2</div>
                <div class="right-item">アイテム: 3</div>
                <div class="right-item">アイテム: 4</div>
                <div class="right-item">アイテム: 5</div>
                <div class="right-item">アイテム: 6</div>
                <div class="right-item">アイテム: 7</div>
                <div class="right-item">アイテム: 8</div>
                <div class="right-item">アイテム: 9</div>
                <div class="right-item">アイテム: 10</div>
                <div class="right-item">アイテム: 11</div>
                <div class="right-item">アイテム: 12</div>
                <div class="right-item">項目: 13</div>
        </div>
    </div>
</div></code>

Answer 1

Flexbox を使用すると幸運がもたらされます

リーリー リーリー