Trying to create a flex layout that expands the main area to fill the entire height of the display, with a footer always at the bottom when the content is small. However, if the main content exceeds the display size, it should behave like a normal page and scroll until the footer.
The code seems to work as expected on Firefox and Chrome on my workstation, but on my iPad using Safari, the footer appears randomly on the page. The issue arises when setting the html height to 100%. If no height is set for the html part, it works fine. But when the main content is smaller than the display height, the body does not stretch.
NOTE: This cannot be replicated with JSFiddle due to their use of an iframe that encapsulates the entire HTML content.
<!DOCTYPE html>
<html>
<head>
<style type="text/css>"
html {
height: 100%;
margin: 0;
}
body {
margin: 0;
display: flex;
flex-direction: column;
height: 100%;
}
main {
flex-grow: 1;
}
div {
background-color: yellow;
height: 1200px;
}
</style>
</head>
<body>
<main>
<div>main</div>
</main>
<footer>
footer
</footer>
</body>
</html>
UPDATE: The same issue can also be seen on Mac OS X with Safari 9.0.2