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

[Live demo here.](http://jsfiddle.net/dqC8t/4/)

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`.