Why is there a vertical scroll bar if parent and child have the same height?

Short Answer

You've run into one of the sneakiest default settings in CSS: vertical-align: baseline

Switch the value to top, bottom or middle, and you should be all set.

Explanation

The initial value of the vertical-align property, which applies to inline-level and table-cell elements, is baseline. This allows browsers to provide space below elements for so-called descenders.

In typography, lowercase letters such as j, g, p and y are known as descenders because they breach the baseline.

baseline

The baseline is the line upon which most letters sit and below which descenders extend.

^{Source: Wikipedia.org}

Being that all inline-level elements are, by default, vertical-align: baseline, elements such as button, input, textarea, img and, like in your code, inline-block divs, will be elevated slightly from the bottom edge of their container.

^{Source: Wikipedia.org}

This descender space adds height inside the container, which causes an overflow and triggers the vertical scroll.

You can see the descender space by scrolling to the bottom of your demo. You'll notice the small gap between the child elements and the bottom edge.

Here are several ways to handle this:

1. Override vertical-align: baseline with vertical-align: bottom (or another value).

2. Switch from display: inline-block to display: block.

3. Set a line-height: 0 on the parent.

4. Set a font-size: 0 on the parent. (If necessary, you can restore the font-size on the children.)