title: Setting Container Height Based on Larger of Two Inner Containers
body: <p>I have a container <code>div</code> that has two inner <code>div</code>s.  The inner <code>div</code>s toggle <code>display:block/none</code> on a <code>hover</code> over the outer container, so only one inner is visible at any given time.  </p>
  
  <p>The outer container has a <code>min-height</code>, but can expand depending on the inner contents. If both inner contents are shorter than the <code>min-height</code>, everything works well.  However, if one of the  inner containers is taller than the <code>min-height</code>, I get a jump in the height of the outer container on hover.</p>
  
  <p>What I want is:  </p>
  
  <ul>
  <li>The outer container keeps its <code>min-height</code> if both inner containers are shorter.</li>
  <li>The outer container has the height of the taller of the two inner containers IF either one is taller than the <code>min-height</code></li>
  <li>There is no expanding/collapsing happening on hover at any time.</li>
  </ul>
  
  <p>Sample HTML:</p>
  
  <pre><code>&lt;div class="outer"&gt;
      &lt;div class="inner inner1"&gt;Inner 1 Green&lt;/div&gt;
      &lt;div class="inner inner2"&gt;Inner 2 Blue&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="after"&gt;Some text afterwards&lt;/div&gt;
  </code></pre>
  
  <p>Sample CSS:</p>
  
  <pre><code>.outer {
      position:relative;
      width: 300px;
      min-height: 150px;
      background: red;
      padding: 10px
  }
  
  .inner {
      width: 200px;
  }
  
  .inner1 {
      background: green;
      height: 200px
  }
  
  .inner2 {
      background: blue;
      height: 100px;
      display: none;
  }
  
  .outer:hover .inner1 {
      display: none;
  }
  .outer:hover .inner2 {
      display: block;
  }
  </code></pre>
  
  <p>Sample Fiddle: <a href="http://jsfiddle.net/ZhS6c/" rel="nofollow">http://jsfiddle.net/ZhS6c/</a></p>
  
  <p>Important: I am looking for a pure CSS solution.  I could easily fix this with jQuery or basic JS, but this is not an option.</p>