我嘗試了像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>
您的程式碼問題在於您在flex中垂直居中了專案。
這會導致div向左移動，從而超出頁面範圍。由於無法在頁面的左邊界之外滾動，因此該部分div變得無法存取。
您可以透過確保flex容器足夠寬來解決此問題。將以下行加入body樣式：