Dans l'extrait de code ci-dessous, je m'attends à ce que le premier et le deuxième conteneurs occupent chacun50%de la hauteur de la fenêtre, et je veux que le premier corps du conteneur ait undébordement vertical.
Malheureusement, lorsque je mets l'énorme morceau dans le premier conteneur, il devient plus grand que 50 % de la page et le débordement automatique ne fonctionne pas. Y a-t-il un moyen dene paspréciser la hauteur ?
* { margin: 0; box-sizing: border-box; } .root { height: 100vh; display: flex; flex-direction: column; gap: 16px; padding: 16px; } .first-block, .second-block { flex: 1; background-color: aqua; border: 1px solid gray; display: flex; flex-direction: column; } .first-block-header { height: 100px; background-color: yellow; } .first-block-footer { height: 100px; background-color: coral; } .first-block-body { flex: 1; overflow: auto; padding: 16px; } .first-block-content { height: 700px; width: 50px; background-color: purple; }
Problem with overflow
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Vous devez envelopper le contenu du bloc dans un div et définir overflow-y pour qu'il défile afin que tout le contenu du bloc soit marqué pour le défilement, sinon seule la partie centrale défilera.
et ajoutez
overflow-y: auto;au bloc lui-même pour le faire défiler.Essayez ceci :
* { margin: 0; box-sizing: border-box; } .root { height: 100vh; display: flex; flex-direction: column; gap: 16px; padding: 16px; } .block-content-wrapper { overflow-y: scroll; } .first-block, .second-block { flex: 1; background-color: aqua; border: 1px solid gray; display: flex; flex-direction: column; overflow-y: auto; } .first-block-header { height: 100px; background-color: yellow; } .first-block-footer { height: 100px; background-color: coral; } .first-block-body { flex: 1; overflow: auto; padding: 16px; } .first-block-content { height: 700px; width: 50px; background-color: purple; }