Si le conteneur est flexible et que item2 a un débordement, le conteneur sera rendu à la taille souhaitée et la barre de défilement de débordement sera visible.
.Flex_container { width: 300px; height: 100px; display: flex; flex-direction: column; } .item1 { color: white; background-color: black; } .item2 { color: white; background-color: brown; overflow: auto; } Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy ei
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accug elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et at.
Mais lorsque je n'applique pas flexbox, le débordement ne semble pas fonctionner. Les conteneurs semblent plus adaptables au contenu. Je veux savoir pourquoi. Je me prépare à apprendre CSS. Et je n'arrivais pas à me sortir cette question de la tête.
.container { width: 300px; height: 100px; } .item1 { color: white; background-color: black; } .item2 { color: white; background-color: brown; overflow: auto; } Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy ei
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accug elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et at.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Le contenant ne s'adapte pas au contenu. Il conserve la hauteur que vous lui donnez.
Mais la hauteur des éléments enfants n'est pas limitée, ils s'agrandissent donc pour s'adapter au contenu, et comme l'élément parent n'a pas de débordement défini sur caché, ils peuvent être vus.
Voici un exemple où deux éléments enfants ont un fond légèrement transparent afin que vous puissiez voir l'arrière-plan de l'élément parent et dans ce cas il se termine légèrement en dessous du deuxième élément enfant.
.container { width: 300px; height: 100px; background: magenta; } .item1 { color: white; background-color: rgba(0, 0, 0, 0.4); } .item2 { color: white; background-color: rgba(0, 0, 255, 0.4); overflow: auto; }