title: 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"?
body: <p>Why in the following example the height of the inner <code>div</code> is not like wrapper's <code>div</code> ?</p>
  
  <p><a href="http://jsfiddle.net/dqC8t/4/" rel="noreferrer">Live demo here.</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;div class="inner"&gt;Hello&lt;/div&gt;
      &lt;div class="inner"&gt;Peace&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.wrapper {
      background-color: #000;
      min-height: 100px;
  }
  .inner {
      display: inline-block;
      background-color: #777;
      height: 100%;
  }
  </code></pre>
  
  <p>If I change <code>min-height: 100px;</code> to <code>height: 100px;</code>, then it looks OK. But, in my case, I need <code>min-height</code>.</p>