Grille CSS : créer une nouvelle ligne lorsque le contenu enfant dépasse la largeur de la colonne

Question

J'ai une disposition à deux colonnes basée sur CSS Grid. Je souhaite créer une nouvelle ligne lorsque le contenu de la deuxième colonne dépasse 1fr. Dans l’état actuel des choses, le contenu déborde simplement de la colonne.

Une exigence de cette mise en page est que les éléments de la colonne menu de droite soient sur une seule ligne. J'y parviens par :

.right-menu {
  ...
  grille-auto-flow : colonne dense ;
  ...
}</pré>
<p>Si je supprime l'attribut <code>grid-auto-flow</code>, le débordement s'arrête. Cependant, les éléments sont désormais empilés sur plusieurs lignes, ce qui n'est pas ce que je souhaite. </p>
<p>J'ai également essayé de changer <code>.right-menu</code>
<pre class="brush:php;toolbar:false;">.right-menu {
  affichage : 'inline-flex' ;
}</pré>
<p>Cependant, le résultat est le même qu’avant. Colonne de débordement de contenu. Existe-t-il un moyen de le faire sans JavaScript ? Les requêtes multimédias sont obsolètes car elles sont basées sur le contenu et non sur la largeur de la fenêtre d'affichage. </p>
<p>

<pre class="snippet-code-css lang-css Prettyprint-override"><code>.main-container {
  couleur d'arrière-plan : #ccc ;
  rembourrage : 1,0rem ;
  largeur : 1 200 px ;
  marge : 1,0rem 0 0 1,0rem ;
}

.menu-grille {
  affichage : grille ;
  grille-modèle-colonnes : répéter (auto-fill, minmax (600px, 1fr));
  grille-modèle-lignes : répéter (remplissage automatique, 1fr) ;
  grille-auto-flow : ligne ;
  écart entre les lignes et la grille : 1,0rem ;
}

.menu-gauche {
  taille de police : 1,25rem ;
}

.menu droit {
  affichage : grille ;
  couleur de fond : blanc ;
  grille-modèle-colonnes : répéter (auto-fill, minmax (65px, 1fr));
  grille-auto-flow : colonne dense ;
  écart entre les lignes et la grille : 0,5 rem ;
  écart entre les colonnes et la grille : 0,75rem ;
}

.article droit {
  couleur d'arrière-plan : #fff ;
  alignement du texte : centre ;
  largeur minimale : 65 px ;
  bordure : 1px noir uni ;
}</code>

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

Answer 1

Utiliser Flexbox vous portera chance

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