How to enforce the height of inner div to be equal to the height of the parent div, if the parent div has "min-height"?

Why in the following example the height of the inner div is not like wrapper's div ?

Live demo here.

HTML:

<div class="wrapper">
    <div class="inner">Hello</div>
    <div class="inner">Peace</div>
</div>

CSS:

.wrapper {
    background-color: #000;
    min-height: 100px;
}
.inner {
    display: inline-block;
    background-color: #777;
    height: 100%;
}

If I change min-height: 100px; to height: 100px;, then it looks OK. But, in my case, I need min-height.