While experimenting with the CSS property display: flex and setting the height as a percentage of the viewport, I encountered an interesting issue with the footer. Despite specifying its height to be 200px (in red), it appears smaller than intended. Upon applying a media query and resizing the browser width, the footer visually expands to 200px (in green).
This behavior was consistently observed across various browsers such as Opera, Firefox, Chrome, IE, and Edge, indicating that it may not be a bug. But how can this anomaly be rationalized?
.header-body-footer-container {
display: flex;
flex-direction: column;
height: calc(100vh - 30px);
}
.body {
height: 100%;
min-height: 20px;
}
.footer {
height: 200px;
background-color: red;
}
.footer::after {
content: " - height is not 200px!";
}
@media only screen and (max-width: 600px) {
.header-body-footer-container {
height: auto;
}
.footer {
background-color: green;
}
.footer::after {
content: " - height is 200px!";
}
}<div class="header-body-footer-container">
<div class="header">header</div>
<div class="body">body</div>
<div class="footer">footer</div>
</div>