mycargus · February 5, 2017 09:54 · Feb 5, 2017
diff --git a/sticky_footer.md b/sticky_footer.md
@@ -0,0 +1,79 @@
+#Sticky footer with `display: flex`
+Solution inspired by [Philip Walton's sticky footer][1]. 
+
+## Explanation
+This solution is [valid only for][2]:
+
+ - Chrome ≥ 21.0
+ - Firefox ≥ 20.0
+ - Internet Explorer ≥ 10
+ - Safari ≥ 6.1
+
+It is based on the [`flex` display][3], leveraging the `flex-grow` property, which allows an element to *grow* in either **height** or **width** (when the `flow-direction` is set to either `column` or `row` respectively), to occupy the extra space in the container.
+
+We are going to leverage also the `vh` unit, where `1vh` is [defined as][4]: 
+
+> 1/100th of the height of the viewport
+
+Therefore a height of `100vh` it's a concise way to tell an element to span the full viewport's height.
+
+This is how you would structure your web page:
+
+    ----------- body -----------
+    ----------------------------
+
+    ---------- footer ----------
+    ----------------------------
+In order to have the footer stick to the bottom of the page, you want the space between the body and the footer to grow as much as it takes to push the footer at the bottom of the page.
+
+Therefore our layout becomes:
+
+    ----------- body -----------
+    ----------------------------
+
+    ---------- spacer ----------
+                                 <- This element must grow in height
+    ----------------------------
+
+    ---------- footer ----------
+    ----------------------------
+
+## Code
+The above described method is implemented as follows
+### HTML
+    <html>
+        <body>
+           <div class="content" />
+           <div class="spacer" />
+           <footer class="footer" />
+        </body>
+    </html>
+
+### CSS
+
+    body {
+        display: flex;
+        flex-direction: column;
+        min-height: 100vh;
+    }
+
+    .spacer {
+        flex: 1;
+    }
+
+You can have a look at [the JSFiddle][5].
+
+## Safari quirks
+Be aware that Safari has a [flawed implementation of the `flex-shrink` property][6], which allows items to shrink more than the minimum height that would be required to display the content.
+To fix this issue you will have to set the `flex-shrink` property explicitly to 0 to the `.content` and the `footer` in the above example:
+
+    .content { flex-shrink: 0; }
+    .footer  { flex-shrink: 0; }
+
+
+  [1]: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
+  [2]: https://developer.mozilla.org/en/docs/Web/CSS/flex#Browser_compatibility
+  [3]: https://developer.mozilla.org/en/docs/Web/CSS/flex
+  [4]: https://developer.mozilla.org/en/docs/Web/CSS/length#Viewport-percentage_lengths
+  [5]: https://jsfiddle.net/xzchhLjp/
+  [6]: http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/#minimum-content-sizing-of-flex-items