Ich habe Dinge wie overflow:auto und margin-left ausprobiert, aber overflow:auto schneidet einen Teil der linken Seite des Div ab, und wenn die Länge des Div zunimmt, funktioniert margin-left nicht. Gibt es etwas Besseres? s Wahl. Wie im Code unten gezeigt, können Sie den Text nicht sehen.
<!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>
您的代码问题在于您在flex中垂直居中了项目。
这会导致div向左移动，从而超出页面范围。由于无法在页面的左边界之外滚动，因此该部分div变得无法访问。
您可以通过确保flex容器足够宽来解决此问题。将以下行添加到body样式中：