Upon updating the DOCTYPE in our application, I noticed that the layout of some widgets got broken. Specifically, one list now has a scrollbar which was not present before (this issue is reproducible in Chrome). To illustrate this problem, I created a simple example:
<div style="overflow-x: hidden; overflow-y: auto; width: 152px; height: 60px;">
<div>
<div style="display: inline-block;" style="width: 152px;">
<div style="width: 152px; height: 20px; overflow: hidden;">Item</div>
<div style="width: 152px; height: 20px; overflow: hidden;">Item</div>
<div style="width: 152px; height: 20px; overflow: hidden;">Item</div>
</div>
</div>
</div>Here is a jsfiddle with transitional doctype where list displayed normally: https://jsfiddle.net/vmga/sL04vjwd/
And the same code, but with html5 doctype there is a scrollbar: https://jsfiddle.net/vmga/aus0tp8p/
In Chrome dev tools, it shows that the height of the parent container (div) is 64px:
https://i.sstatic.net/RAiPg.png
Therefore, my questions are:
- Where did those extra 4 pixels come from?
- How can such issues be debugged? Chrome only displays the final number without providing insight into how it was calculated. What is the approach to solving these problems?