flex-shrink: 0 not applied to header and footer in sticky footer demo.

[carolineschnapp]

In this article, you present a revised fix for the sticky footer: http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/ However the CSS presented there is not used here: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ For example flex-shrink: 0 is not applied to header and footer in the actual demo.

I am trying to get a sticky footer in my code pen here, but no matter what I try I fail miserable when previewing in IE11: http://codepen.io/carolineschnapp/pen/VLbVrx Does anyone has a code pen for a sticky footer that works in all modern browsers + IE12 + IE11 + IE10 ?

[philipwalton]

This is intentional. The point of Solved by Flexbox is to show how flexbox the technology solves common layout problems, not flexbox as implemented by browser vendors.

As I say on the home page:

All of the code samples on this site show how to solve a particular design problem with Flexbox. They show just the code that's needed to make the demos work in a spec-compliant browser. Some browsers do not fully comply with the latest version of the spec, so sadly, a few workarounds were necessary.

Workarounds for non-compliant browsers are not shown in the code samples, but if you're curious about those implementation details, you can check out the source files. Each demo links to its source, and all browser-specific workarounds are well-documented, so don't be afraid to take a look.

Perhaps I could make it more obvious which demos require workarounds for cross-browser compatibility. Would that be helpful?