<p>Ich habe ein zweispaltiges Layout basierend auf CSS Grid. Ich möchte eine neue Zeile erstellen, wenn der Inhalt der zweiten Spalte <code>1fr</code> überschreitet. So wie es derzeit aussieht, läuft der Inhalt einfach über die Spalte hinaus. </p> <p>Eine Voraussetzung für dieses Layout ist, dass sich die Elemente in der Spalte <code>rechtes Menü</code> befinden. Dies erreiche ich durch: </p> <pre class="brush:php;toolbar:false;">.right-menu { ... Grid-Auto-Flow: Spalte dicht; ... }</pre> <p>Wenn ich das Attribut <code>grid-auto-flow</code> entferne, stoppt der Überlauf. Allerdings sind die Artikel jetzt in mehreren Reihen gestapelt, was ich nicht möchte. </p> <p>Ich habe auch versucht, <code>.right-menu</code> zu ändern. <pre class="brush:php;toolbar:false;">.right-menu { Anzeige: 'inline-flex'; }</pre> <p>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. </p> <p> <pre class="snippet-code-css lang-css Prettyprint-override"><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></pre> <pre class="snippet-code-html lang-html Prettyprint-override"><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></pre> </p>

.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>