下記のようなHTML/CSSの場合に、クラスwrapperとクラスinline・overflowの高さが異なってしまうのはどうしてでしょうか？

HTML:

<div class='wrapper'>
    <div class="inline">
        <div class="overflow">あいうえお</div>
    </div>
</div>

CSS:

.wrapper { border: 1px solid red; }

.inline {
    border: 1px solid green;
    display: inline-block;
}

.overflow {
    border: 1px solid blue;
    overflow: hidden;
}

JSFiddle