fix for display: inline-flex, closes #68

liabru · May 14, 2015 · e769b9f · e769b9f
1 parent d8cc365
commit e769b9f
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 2 deletions.
diff --git a/jquery.matchHeight.js b/jquery.matchHeight.js
@@ -169,7 +169,12 @@
             // must first force an arbitrary equal height so floating elements break evenly
             $elements.each(function() {
                 var $that = $(this),
-                    display = $that.css('display') === 'inline-block' ? 'inline-block' : 'block';
+                    display = $that.css('display');
+
+                // temporarily force a usable display value
+                if (display !== 'inline-block' && display !== 'inline-flex') {
+                    display = 'block';
+                }
 
                 // cache the original inline style
                 $that.data('style-cache', $that.attr('style'));
@@ -210,7 +215,12 @@
                 // iterate the row and find the max height
                 $row.each(function(){
                     var $that = $(this),
-                        display = $that.css('display') === 'inline-block' ? 'inline-block' : 'block';
+                        display = $that.css('display');
+
+                    // temporarily force a usable display value
+                    if (display !== 'inline-block' && display !== 'inline-flex') {
+                        display = 'block';
+                    }
 
                     // ensure we get the correct actual height (and not a previously set height value)
                     var css = { 'display': display };

diff --git a/test.css b/test.css
@@ -277,4 +277,16 @@ a, a:link, a:visited, a:active, a:hover {
     vertical-align: top;
     /*width: 20%;*/
     float: none;
+}
+
+/* test inline-flex */
+
+.inline-flex-items {
+    text-align: center;
+}
+
+.inline-flex-items .item {
+    display: inline-flex;
+    vertical-align: top;
+    float: none;
 }
diff --git a/test.html b/test.html
@@ -289,6 +289,33 @@ <h3>Target</h3>
                 </div>
             </div>
 
+            <div class="items-container inline-flex-items">
+                <div class="item item-0">
+                    <p>display: inline-flex</p>
+                </div>
+                <div class="item item-1">
+                    <p>display: inline-flex</p>
+                </div>
+                <div class="item item-2">
+                    <p>display: inline-flex</p>
+                </div>
+                <div class="item item-3">
+                    <p>display: inline-flex</p>
+                </div>
+                <div class="item item-4">
+                    <p>display: inline-flex</p>
+                </div>
+                <div class="item item-5">
+                    <p>display: inline-flex</p>
+                </div>
+                <div class="item item-6">
+                    <p>display: inline-flex</p>
+                </div>
+                <div class="item item-7">
+                    <p>display: inline-flex</p>
+                </div>
+            </div>
+
             <div class="items-container hidden-items">
                 <div class="item item-0">
                     <p>display: none</p>