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

Solution

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