title: Expand Inner div height to meet the outer div height
body: <p>I want to change the inner div height according to the outer div.
  In my case I have two inner divs one with fixed height and the outer div expands its heigh according to that (I use 'clearfix' there). But I need the other inner div also change its height to the outer div height 
  height : 100%; did not work.
  This is a JsFiddle link to show my problem.
  <a href="https://jsfiddle.net/qjsqxk7j/18/" rel="nofollow">https://jsfiddle.net/qjsqxk7j/18/</a></p>
  
  <p>HTML -></p>
  
  <pre><code>&lt;div class="outer clearfix"&gt;
    &lt;div class="col-xs-3 left"&gt;
    &lt;/div&gt; 
    &lt;div class="col-xs-9 right"&gt;
    &lt;div class="inner"&gt;
      &lt;label&gt;sssss&lt;/label&gt;
      &lt;button class="btn-default"&gt;
        sss
      &lt;/button&gt;
    &lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS -></p>
  
  <pre><code>.right {
      height: 100%;
      background-color: blue;      
  }
  .left {
      height: 200px;
      background-color: red;
  
  }
  .inner{
      position: relative;
      top: 50%;
      transform: translateY(-50%)
  }
  .outer {
      background-color: yellow;
      position: relative;
      max-width : 500px; 
  }
  </code></pre>
  
  <p>Actually I want the Blue div take all the yellow space left and the button and label comes to its vertical centre.
  (I want my outer div to get one of its inner div height and changed accordingly.And then when the outer div height changes the other inner div also has to change its height. But it won't.)</p>