fix for display: inline-flex, closes #68

3 files changed, 51 insertions, 2 deletions

diff --git a/jquery.matchHeight.js b/jquery.matchHeight.js
index 0ec4b85..392bd1a 100644
--- 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
index b0e9485..9f46902 100644
--- 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;
 }
\ No newline at end of file
diff --git a/test.html b/test.html
index c066466..90e82e4 100644
--- a/test.html
+++ b/test.html
@@ -289,6 +289,33 @@
                 </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>