Update clearfix mixin with flexbox fix

See http://danisadesigner.com/blog/flexbox-clear-fix-pseudo-elements/

Fixes #8148

diff --git a/scss/util/_mixins.scss b/scss/util/_mixins.scss
index fcb0e916d9c5473d59c13f9b943ac1184d1d4966..19f4a0ad327b60a3cdc048b0951037ecdf9170fb 100644 (file)
--- a/scss/util/_mixins.scss
+++ b/scss/util/_mixins.scss
@@ -129,12 +129,16 @@
 }
 
 /// Applies the micro clearfix hack popularized by Nicolas Gallagher. Include this mixin on a container if its children are all floated, to give the container a proper height.
+/// The clearfix is augmented with specific styles to prevent borders in flexbox environments
 /// @link http://nicolasgallagher.com/micro-clearfix-hack/ Micro Clearfix Hack
+/// @link http://danisadesigner.com/blog/flexbox-clear-fix-pseudo-elements/ Flexbox fix
 @mixin clearfix {
   &::before,
   &::after {
     content: ' ';
     display: table;
+    flex-basis: 0;
+    order: 1;
   }
 
   &::after {