Materialize CSS sticky footer flex properties not working
When I apply the css properties shown for sticky footers for Materialize here, the height of my main element shoots up to about 33000px. Footer shows fine, but above it is blank (presumably for a length of about 33000 pixels). The elements are arranged correctly with header, then main, then footer elements.
html:
<body>
<header>
Header stuff
</header>
<main>
Main stuff
</main>
<footer>
Footer stuff
</footer>
</body>
sass:
body
display: flex
min-height: 100vh
flex-direction: column
main
flex: 1 1 auto
Answer
I was able to fix this by applying the parent flex css to a wrapper div instead of the body element, like so:
html:
<body>
<div class="page-flexbox-wrapper">
<header>
Header stuff
</header>
<main>
Main stuff
</main>
<footer>
Footer stuff
</footer>
</div>
</body>
sass:
.page-flexbox-wrapper
display: flex
min-height: 100vh
flex-direction: column
main
flex: 1 1 auto