How to prevent div being cut of when resized or even in normal window?

October 4, 2022

I have tried thing like overflow:auto and margin-left overflow:auto cuts of some part from left of the div and margin-left will not work when length of div is increased is there any better option.As you can see in below code you are not able to 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>

>Solution :

The issue with your code is that you are centering the items vertically in the flex.

This causes the div to shift to the left, thus going out of the page. Since you cannot scroll beyond the left boundary of the page, that part of the div becomes inaccessible.

You can fix this by making sure that the flex container is wide enough. Add the following line to the body style: