I've applied min-height: 100vh; to the body, and then height: 100% to the main element. However, the height of the main does not extend fully to its parent container.
Could someone please help me understand why this is happening? Thank you.
I've also tried various other approaches, but none of them seem to resolve the issue.
Visit this CodePen for reference
body {
border: 2px solid red;
min-height: 100vh;
}
main {
border: 2px solid green;
height: 100%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<main>hihihihasidfiojdi</main>
</body>
</html>