I tried things like overflow:auto and margin-left, but overflow:auto will crop off part of the left side of the div, and when the length of the div increases, margin-left won't work, is there any Better choice. As shown in the code below, you cannot see the text.
<!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
The problem with your code is that you are vertically centering the items in flex.
This will cause the div to move to the left, out of the page. Since there is no way to scroll outside the left border of the page, that part of the div becomes inaccessible.
You can solve this problem by ensuring that the flex container is wide enough. Add the following lines to the body style:
width: fit-content;