Parfois, lors de la création d'un composant, vous remarquez soudainement une étrange barre de défilement horizontale. Vous continuez d'essayer de tout réparer, pour finalement réaliser que la raison est différente. Combien de fois vous êtes-vous retrouvé dans cette situation?
Dans cet article, je couvrirai un problème délicat qui peut vous coûter des heures d'essais et d'erreurs. Cela a à voir avec la disposition de la grille et j'ai pensé que cela valait la peine d'en parler.
Avant de commencer l'article, je veux d'abord exprimer certaines des nuances. Voici quelques points à garder à l'esprit:
Vous rencontrez un problème au milieu de votre journée. Vous êtes fatigué et vous avez encore beaucoup de travail à faire.
Tu as faim.
Il est facile pour vous de passer à côté de la cause première du problème car elle n'est pas liée au composant sur lequel vous travaillez.
Cela dit, commençons.
Ce dont vous avez besoin à la fin
Pour vous donner un peu de contexte, voici la mise en page que j'essaie de réaliser. Notez qu'il existe un conteneur de défilement à la fin de la section principale.
Définissons le problème
En travaillant sur une section avec un conteneur de défilement, j'ai remarqué un défilement horizontal sur toute la page , ce qui était inattendu.
display: flex -, . , overflow-x: auto, X.
.section {
display: flex;
overflow-x: auto;
}
. , , .
, , . main - .
, ? , :
overflow-x: hidden?
- ?
, — . , . — . .
, , CSS (, - - ) , - .
, ? main aside:
<div class="wrapper">
<main>
<section class="section"></section>
</main>
<aside></aside>
</div>
@media (min-width: 1020px) {
.wrapper {
display: grid;
grid-template-columns: 1fr 248px;
grid-gap: 40px;
}
}
1fr. , gap. 100% . , — auto. - ( ).
, . minmax().
.wrapper {
display: grid;
grid-template-columns: minmax(0, 1fr) 248px;
grid-gap: 40px;
}
. , . CSS-, .main:
min-width: 0;
, overflow: hidden;
. , overflow: hidden.
, , . overflow: hidden .
, , .
, CSS Grid, 21 2021
(Ahmad Shadeed, The Minimum Content Size In CSS Grid, Jan 27, 2021)