J'ai essayé des choses comme overflow:auto et margin-left, mais overflow:auto recadrera une partie du côté gauche du div, et lorsque la longueur du div augmente, margin-left ne fonctionnera pas, y a-t-il mieux Le choix. Comme le montre le code ci-dessous, vous ne pouvez pas voir le texte.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
</title>
</head>
<style>
body{
min-height: 100vh;
display: flex;
justify-content: center;
margin: 0 ;
align-items: center;
flex-direction: column;
overflow: auto;
}
h1{
width: 2500px;
min-height: 300px;
background: pink;
color: black;
}
</style>
<body>
<h1>This is h1</h1>
</body>
</html>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Le problème avec votre code est que vous centrez verticalement les éléments en flex.
Cela provoque le déplacement du div vers la gauche, hors des limites de la page. Puisqu'il n'y a aucun moyen de faire défiler en dehors de la bordure gauche de la page, cette partie du div devient inaccessible.
Vous pouvez résoudre ce problème en vous assurant que le conteneur flexible est suffisamment large. Ajoutez les lignes suivantes au style du corps :