我尝试了像overflow:auto和margin-left这样的东西，但是overflow:auto会从div的左侧裁剪掉一部分，而当div的长度增加时，margin-left将不起作用，是否有更好的选择。如下面的代码所示，您无法看到文本。
<!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>
P粉3889454322023-09-10 00:39:04
您的代码问题在于您在flex中垂直居中了项目。
这会导致div向左移动，从而超出页面范围。由于无法在页面的左边界之外滚动，因此该部分div变得无法访问。
您可以通过确保flex容器足够宽来解决此问题。将以下行添加到body样式中：
width: fit-content;