PanelBar expands too far, then slides up - css

Question

I have a panelbar which displays a few divs/ULs. The lists, when their width is set to 40%, for example, cause the panelbar to slide farther down than it should, and then jump back up to where it 'should' be. Remove the 40% on the UL, and everything works as expected.
Version 2015.3.930 has this issue, whereas older versions (randomly picked 2011.3.1407) do not.
<ul class="doctypecontainer noselect">
<li style="clear:both;">
<span>Truck Freight Bill (1)</span>
<div class="doctypecontainercontent">
<div class="docdatelabel"><input type="checkbox" />10/27/2015</div>
<ul class="pagelist">
<li><input type="checkbox" /><span>Page 1</span></li>
<li><input type="checkbox" /><span>Page 2</span></li>
<li><input type="checkbox" /><span>Page 3</span></li>
</ul>
<ul class="pagelist">
<li><input type="checkbox" /><span>Page 4</span></li>
<li><input type="checkbox" /><span>Page 5</span></li>
<li><input type="checkbox" /><span>Page 6</span></li>
</ul>
<div class="docdatelabel"><input type="checkbox" />11/15/2015</div>
<ul class="pagelist">
<li><input type="checkbox" /><span>Page 1</span></li>
<li><input type="checkbox" /><span>Page 2</span></li>
<li><input type="checkbox" /><span>Page 3</span></li>
</ul>
<div class="docdatelabel"><input type="checkbox" />11/21/2015</div>
<ul class="pagelist">
<li><input type="checkbox" /><span>Page 1</span></li>
<li><input type="checkbox" /><span>Page 2</span></li>
<li><input type="checkbox" /><span>Page 3</span></li>
</ul>
<span style="clear:left; display:block;"></span>
</div>
</li>
</ul>
See fiddle here: http://jsfiddle.net/u48kLrem/
remove the width:40% from the pagelist class, and it slides as expected.

Answer 1

I don't know, man. I suspect that it has to do with the text wrapping (or something wrapping) and causing it to miscalculate the height. Probably just bad coding on their part, but a simple modification causes the jump to disappear. Also, this modification should make it more reliable/future-proofed too.
.pagelist {
padding-bottom:5px;
list-style-type:none;
padding-left:10px;
width: 50%; /* change this to 50% */
float: left;
box-sizing: border-box; /* add this to force it to calculate
the padding in with the width to
total 50% */
}
Demo: http://jsfiddle.net/jmarikle/2ekxpuu6/