Adding overflow hidden to element causing height shifting

by dswitzer

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<h1>
  Adding overflow hidden to element causing height shifting
</h1>

<div class="outer">
  <div class="inner">
     <h2>
       box 1
     </h2>
  </div>
</div>

<div class="outer">
  <div class="inner overflow-hidden">
   <h2>
     box 2 (overflow hidden)
     - the outer box ends up having less height in Chrome 59 than box 1 &amp; 3
   </h2>
  </div>
</div>


<div class="outer">
  <div class="inner">
   <h2>
     box 3
   </h2>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}

.outer {
  border: 1px solid #ccc;
  margin: 1em;
}

.inner {
  height: 300px;
  display: block;
  margin: 0;
}

.overflow-hidden {
  overflow: hidden;
}

JavaScript

$(function (){
	$("h2").each(function (){
		var $h2 = $(this)
			, $outer = $h2.closest(".outer");
			
		$h2.after("<div>Height: " + $outer.height() + "</div>");
	})
})