Logo image gets cut when height of screen is adjusted - html

Question

I am trying to make the following webpage responsive but when I adjust the screen height the logo image gets cut as I decrease the height of the screen.
I am unable to find the common ground where I can set the logo image as full view and set some padding around the logo so that it doesn't get stuck to the top screen.
Below is the GIF image that describes the issue:
body {
background-color: black;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
}
img {
height: 5em;
width: 5em;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
}
div {
background-color: #FFF;
padding: 2em;
}
<section>
<img src="https://i.postimg.cc/G3WCmqLQ/icon.png">
<div>
<h1>Welcome</h1>
</div>
</section>

Answer 1

What you need to do is just change css of body from display: flex; to display: inline-grid;. Hope this will solve your issue.
body {
background-color: black;
display: inline-grid;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
}
img {
height: 5em;
width: 5em;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
}
div {
background-color: #FFF;
padding: 2em;
}
And HTML is;
<section>
<img src="https://i.postimg.cc/G3WCmqLQ/icon.png">
<div>
<h1>Welcome</h1>
</div>
</section>

Answer 2

Add height: 100% to section
body {
background-color: black;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
}
section {
height: 100%;
}
img {
height: 15em;
width: 15em;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
}
div {
background-color: #FFF;
padding: 2em;
}
<section>
<img src="https://dummyimage.com/300">
<div>
<h1>Welcome</h1>
</div>
</section>