I am working on making my application flexible by using 100vw width and 100vh height for the components. Everything displays perfectly in any resolution on a computer browser, but when viewed on a mobile device, an empty background is drawn below the body as shown with a blue background in the picture. Can someone please help me identify the issue here and suggest a solution? Thank you.
html, body {
height: 100%;
}
.page {
top: 0;
display: flex;
flex-direction: row;
min-width: 100vw;
min-height: 100vh;
&_content {
flex-direction: column;
width: 100%;
background-color: #ec7373;
min-height: 100vh;
}
}