title: How to shift element upwards to it's variable height using css
body: <h1>Main question</h1>
  
  <p>I have two divs, one nested inside the other and i wish to shift inner div outside (upwards) of outer div and slide-in it on a hover.</p>
  
  <p>Markup is looking like so:</p>
  
  <pre><code>&lt;div class="body"&gt;
      &lt;div class="inner"&gt;Green is variable-height text which slides in on viewport hover&lt;/div&gt;
      Blue is a viewport (&amp;lt;body&amp;gt;, visible part of a page), which content should be compressed upon green slide-in
  &lt;/div&gt;
  </code></pre>
  
  <p>And (a little pseudo) css:</p>
  
  <pre><code>.body {
      background: #aaf;
      height: 300px;
      width: 300px;
      overflow: hidden;
  }
  
  .inner, .body:hover .inner {
      -webkit-transition:all linear 0.2s;
      transition:all linear 0.2s;
  }
  
  .inner {
      background: #afa;
      width: 300px;
      margin-top:-some-magic-to-get-this-div-height;
  }
  
  .body:hover .inner {
      margin-top: 0;
  }
  </code></pre>
  
  <p>And a final result animation i'd like to get, without using fixed height of green div:</p>
  
  <p><img src="https://i.stack.imgur.com/rgZuW.gif" alt="example.gif"></p>
  
  <p>Also, this example (with a guessed and hard-coded height value of 2.5em) on jsfiddle to experiment with:</p>
  
  <p><a href="http://jsfiddle.net/n7vyLoh4/20/" rel="noreferrer">http://jsfiddle.net/n7vyLoh4/20/</a></p>
  
  <h1>Possible partial work-around (not satisfactory)</h1>
  
  <p>It is possible to partially implement what i want, using transitioning max-height instead of transitioning margin-top, the transition of <code>max-height: 0;</code> <strong>-&gt;</strong> <code>max-height: 100%;</code> with <code>overflow: hidden;</code> set at all times
  works, but has two draw-backs:</p>
  
  <ol>
  <li>it doesn't slide in, it's more like drops the curtain</li>
  <li>it doesn't stop transition at the end of green div, it transits till the end of outer blue div, which especially noticeable at reverse transition, when it first travels all the way from bottom of blue div to bottom of green div before any effect is visible. Also, this means that despite transition time set to 0.2s, it will spend only fraction of this time on transiting trough green div, because this 100% are 100% of parent div, not inner one (and my question could be answered if there is a way to calculate the 100% of inner div height).</li>
  </ol>
  
  <p>Here is an illustration:</p>
  
  <p><img src="https://i.stack.imgur.com/jMNbF.gif" alt="example2.gif"></p>
  
  <p>And fiddle for that:</p>
  
  <p><a href="http://jsfiddle.net/bsd7vnwu/1/" rel="noreferrer">http://jsfiddle.net/bsd7vnwu/1/</a></p>