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"?

Question

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.

Answer 1

Some properties in CSS inherit the value of the parent automatically, some don't. Minimum height must be explicitly stated when you want it to inherit the parent's value:

min-height: inherit;

Answer 2

I believe this is the output you want: http://jsfiddle.net/xhp7x/

.wrapper {
    display: table;
    background-color: #000;
    height: 100px;
    width: 100%;
}
.wrapper2 {
    height: 100%;
    display: table-row
}
.inner {
    height: 100%;
    display: inline-block;
    background-color: #777;
    margin-right: 10px;
    vertical-align: top;
}

Had to add a second DIV wrapper2.

Tested on chrome and firefox.