From e769b9f071846c66fe638b4dd58a714ca50a3075 Mon Sep 17 00:00:00 2001
From: liabru <liabru@brm.io>
Date: Thu, 14 May 2015 20:30:26 +0100
Subject: [PATCH] fix for display: inline-flex, closes #68

---
 jquery.matchHeight.js | 14 ++++++++++++--
 test.css              | 12 ++++++++++++
 test.html             | 27 +++++++++++++++++++++++++++
 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 @@ <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>