Flex height problems with safari and angular material

[delsner]

I'm having a problem with flexing contents with angular material on safari browsers. The problem is that the browser doesn't flex the content-div over the entire contents and places the footer below, but instead the footer is sitting after the content to fill up 100% height.

Here is a working codepen . I'm using Safari 9.1 . The same problem occurs on mobile safari.

To see the history of this issue, here's the stack overflow question.