CSS-Raster: Erstellen Sie eine neue Zeile, wenn der untergeordnete Inhalt die Spaltenbreite überschreitet

Question

Ich habe ein zweispaltiges Layout basierend auf CSS Grid. Ich möchte eine neue Zeile erstellen, wenn der Inhalt der zweiten Spalte 1fr überschreitet. So wie es derzeit aussieht, läuft der Inhalt einfach über die Spalte hinaus.

Eine Voraussetzung für dieses Layout ist, dass sich die Elemente in der Spalte rechtes Menü befinden. Dies erreiche ich durch:

.right-menu {
  ...
  Grid-Auto-Flow: Spalte dicht;
  ...
}

Wenn ich das Attribut grid-auto-flow entferne, stoppt der Überlauf. Allerdings sind die Artikel jetzt in mehreren Reihen gestapelt, was ich nicht möchte.

Ich habe auch versucht, .right-menu zu ändern.

.right-menu {
  Anzeige: 'inline-flex';
}

Das Ergebnis ist jedoch das gleiche wie zuvor. Der Inhalt der Spalte läuft über. Gibt es eine Möglichkeit, dies ohne JavaScript zu tun? Medienabfragen sind veraltet, da sie auf dem Inhalt und nicht auf der Breite des Ansichtsfensters basieren.

<code>.main-container {
  Hintergrundfarbe: #ccc;
  Polsterung: 1,0rem;
  Breite: 1200px;
  Rand: 1,0rem 0 0 1,0rem;
}

.menu-grid {
  Anzeige: Raster;
  Rastervorlagenspalten: wiederholen (automatische Füllung, minmax (600px, 1fr));
  Rastervorlagenzeilen: wiederholen (automatisch ausfüllen, 1fr);
  Grid-Auto-Flow: Zeile;
  Gitterzeilenabstand: 1.0rem;
}

.left-menu {
  Schriftgröße: 1,25rem;
}

.rechtes Menü {
  Anzeige: Raster;
  Hintergrundfarbe: weiß;
  Rastervorlagenspalten: wiederholen (automatische Füllung, minmax (65px, 1fr));
  Grid-Auto-Flow: Spalte dicht;
  Gitterreihenabstand: 0,5rem;
  Gitterspaltenabstand: 0,75rem;
}

.right-item {
  Hintergrundfarbe: #fff;
  Textausrichtung: Mitte;
  Mindestbreite: 65 Pixel;
  Rand: 1 Pixel einfarbig schwarz;
}</code>

<code><div class="main-container">
    <div class="menu-grid">
        <div class="left-menu">Left</div>
            <div class="right-menu">
                <div class="right-item">Item: 1</div>
                <div class="right-item">Item: 2</div>
                <div class="right-item">Item: 3</div>
                <div class="right-item">Item: 4</div>
                <div class="right-item">Item: 5</div>
                <div class="right-item">Item: 6</div>
                <div class="right-item">Item: 7</div>
                <div class="right-item">Item: 8</div>
                <div class="right-item">Item: 9</div>
                <div class="right-item">Item: 10</div>
                <div class="right-item">Item: 11</div>
                <div class="right-item">Item: 12</div>
                <div class="right-item">Item: 13</div>
        </div>
    </div>
</div></code>

Answer 1

使用 Flexbox 会让你好运

.main-container {
  background-color: #ccc;
  padding: 1.0rem;
  width: 1200px;
  margin: 1.0rem 0 0 1.0rem;
}

.menu-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.0rem;
}
.menu-grid > * {
  flex: 600px;
}
.left-menu {
  font-size: 1.25rem;
}

.right-menu {
  display: grid;
  background-color: white;
  grid-auto-columns: 65px;
  grid-auto-flow: column; 
  grid-row-gap: 0.5rem;
  grid-column-gap: 0.75rem;
}

.right-item {
  background-color: #fff;
  text-align: center;
  min-width: 65px;
  border: 1px solid black;
}

<div class="main-container">
    <div class="menu-grid">
        <div class="left-menu">Left</div>
            <div class="right-menu">
                <div class="right-item">Item: 1</div>
                <div class="right-item">Item: 2</div>
                <div class="right-item">Item: 3</div>
                <div class="right-item">Item: 4</div>
                <div class="right-item">Item: 5</div>
                <div class="right-item">Item: 6</div>
                <div class="right-item">Item: 7</div>
                <div class="right-item">Item: 8</div>
                <div class="right-item">Item: 9</div>
                <div class="right-item">Item: 10</div>
                <div class="right-item">Item: 11</div>
                <div class="right-item">Item: 12</div>
                <div class="right-item">Item: 13</div>
        </div>
    </div>
</div>