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 ; ... } 
Si je supprime l'attribut grid-auto-flow, 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. 
 
J'ai également essayé de changer .right-menu 
.right-menu { affichage : 'inline-flex' ; } 
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. 
 
 
.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 ; }
 
 
 
Gauche
 
 
Article : 1
 
Article : 2
 
Article : 3
 
Article : 4
 
Article : 5
 
Article : 6
 
Article : 7
 
Article : 8
 
Article : 9
 
Article : 10
 
Article : 11
 
Article : 12
 
Article : 13