Here is the code snippet I am working with:
html, body {
height: 100%;
margin: 0;
font-family: Helvetica;
font-size: 25px;
}
.header {
background-color: lightsalmon;
padding: 20px;
text-align: center;
}
.main {
padding: 20px;
text-align: center;
flex: 1 1 auto;
}
.footer {
background-color: lightblue;
padding: 20px;
text-align: center;
}
.wrapper {
border: 1px solid black;
min-height: 100%;
display: flex;
flex-direction: column;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class='wrapper'>
<header class='header'>Header</header>
<main class='main'>Main</main>
<footer class='footer'>Footer</footer>
</div>
</body>
</html>I am curious about the distinction between using height: 100% and min-height: 100% in the .wrapper class in CSS. In this particular example, it does not seem to have any visible impact, but are there specific scenarios where this differentiation would be relevant?