title: Inner div to have height 100% inside a container of height auto
body: <p>I'm struggling to get a div to expand fully to it's container's height.</p>
  
  <p>Markup:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="innerOne inner"&gt;&lt;/div&gt;
    &lt;div class="innerTwo inner"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>At different viewports <code>.innerTwo</code>'s content is taller than that of <code>.innerOne</code>'s but I would like it's background to be the same size as <code>.innerTwo</code>'s</p>
  
  <p>Styles:</p>
  
  <pre><code>.container {
     width: 100%;
     height: auto;
     background-color: yellow;   
  
     /* clearfix */
     *zoom: 1;
     &amp;:before,
     &amp;:after {
       display: table;
       content: "";
       line-height: 0;
     }
     &amp;:after {
      clear: both;
     }
  }
  
  .inner {
     float: left;
     width: 50%;
     height: 100%;
     background-color: red;
  }
  </code></pre>
  
  <p>But the heights wont match up. I know it can be done by giving the container a set height but I don't want to do that since it's a responsive site. Is this possible? I'd rather not use JS. </p>