From 8844acb9fea5e734ba10ef365091eee01e3c2be9 Mon Sep 17 00:00:00 2001
From: Jorrit Schippers <jorrit@ncode.nl>
Date: Thu, 15 Oct 2015 08:02:06 +0200
Subject: [PATCH] Improve row detection when cells contain floating contents

The row detection mechanism fixes the height of each cell to 100 pixels.
Cells that have floating contents can in some conditions remain taller
than 100 pixels, causing cells in the same row to be of unequal height.
Adding `overflow: hidden` fixes this problem.
---
 jquery.matchHeight.js |  3 ++-
 test.css              | 15 +++++++++++++++
 test.html             | 31 +++++++++++++++++++++++++++++++
 3 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/jquery.matchHeight.js b/jquery.matchHeight.js
index 392bd1a..b3123f2 100644
--- a/jquery.matchHeight.js
+++ b/jquery.matchHeight.js
@@ -187,7 +187,8 @@
                     'margin-bottom': '0',
                     'border-top-width': '0',
                     'border-bottom-width': '0',
-                    'height': '100px'
+                    'height': '100px',
+                    'overflow': 'hidden'
                 });
             });
 
diff --git a/test.css b/test.css
index 9f46902..0d72bf5 100644
--- a/test.css
+++ b/test.css
@@ -289,4 +289,19 @@ a, a:link, a:visited, a:active, a:hover {
     display: inline-flex;
     vertical-align: top;
     float: none;
+}
+
+/* test with-float */
+
+.with-float .item-0 {
+    float: none;
+    width: auto;
+}
+
+.with-float .item-0 div {
+    display: inline-block;
+    float: left;
+    width: 150px;
+    height: 150px;
+    background: green;
 }
\ No newline at end of file
diff --git a/test.html b/test.html
index 90e82e4..ad5d478 100644
--- a/test.html
+++ b/test.html
@@ -344,6 +344,37 @@ <h3>Target</h3>
                     </div>
                 </div>
             </div>
+
+            <div class="items-container with-float">
+                <div class="item item-0">
+                    <div>floated</div>
+                    <p>some text</p>
+                    <p>some text</p>
+                    <p>some text</p>
+                    <p>some text</p>
+                    <p>some text</p>
+                </div>
+                <div class="item item-1">
+                    <p>some text</p>
+                    <p>some text</p>
+                    <p>some text</p>
+                    <p>some text</p>
+                </div>
+                <div class="item item-2">
+                    <p>some text</p>
+                    <p>some text</p>
+                    <p>some text</p>
+                    <p>some text</p>
+                </div>
+                <div class="item item-3">
+                    <p>some text</p>
+                </div>
+                <div class="item item-4">
+                    <p>some text</p>
+                    <p>some text</p>
+                    <p>some text</p>
+                </div>
+            </div>
         </div>
     </body>
 </html>