Comment faire défiler une zone de contenu Flexbox indépendamment tout en permettant le débordement des éléments enfants ?

Faire défiler une Flexbox avec un contenu débordant

Problème :

Considérez la disposition suivante :

[Image de la mise en page]

Lorsque la zone de contenu déborde, la page entière défile, plutôt que seulement la zone de contenu elle-même. L'application de overflow: auto au content div résout ce problème, mais cela entraîne la coupure des bordures des colonnes.

Question :

Comment la zone de contenu peut-elle être configuré pour défiler indépendamment, tout en permettant à ses enfants de s'étendre au-delà de la zone de contenu hauteur ?

Réponse :

Selon Tab Atkins, l'auteur de la spécification flexbox, l'approche suivante peut être utilisée :

.content {
    flex: 1;
    display: flex;
    overflow: auto;
}

.box {
    display: flex;
    min-height: min-content;
}

<div class="content">
  <div class="box">
    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
    <div class="column">Column 3</div>
  </div>
</div>

En définissant min-height sur min-content sur la boîte div, les colonnes s'étendront au-delà de la hauteur de la boîte de contenu, tout en autorisant la zone de contenu pour faire défiler indépendamment. Les préfixes du fournisseur peuvent être requis pour des raisons de compatibilité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!