When height is reduced below certain limit the image placed at top of div is not visible and cannot be scrolled up as shown in the pictures. Can anyone tell on how to solve this.

html:

<div >   
    <img id="xy"src="https://placeimg.com/50/50/animals">
</div>

css:

    body{
        display: flex;
        justify-content: center;
        height: 100vh;
        align-items: center;
    }
    .box{
        background: lightblue;
        width: 300px;
        height: 500px;
        min-height: 300px;
    }
    img{
        position: relative;
        top: -20px;
        left: 120px;
    }

Webpage when resized

Full webpage

CodePudding user response：

Your img is positioned relative to the nearest positioned ancestor. That means it is being placed -10px beneath the body, because .box does not have any position set.

CodePudding user response：

At "body" part of css, try "min-height" instead of "height".

    /*your code*/
    
    body{
        display: flex;
        justify-content: center;
        height: 100vh;
        align-items: center;
    }
    
    /*try this one instead ("min-height" instead of "height")*/
    
        body{
        display: flex;
        justify-content: center;
        min-height: 100vh;
        align-items: center;
    }