title: CSS transtitions: Shrink height of div whose height is determined by its content
body: <p>Upon "Hide", I want to shrink (reduce height to 0px) on some divs whose height is otherwise determined by the height of their content.  </p>
  
  <p>This code sort of works, but the transitions only work on padding and border, not on height, which is the bulk of the vertical size, so the result isn't smooth.</p>
  
  <p><a href="http://plnkr.co/edit/Yty6f45BisqpCpWzgyan" rel="nofollow">Plunker</a></p>
  
  <pre><code>&lt;div class="cont"&gt;
    &lt;div class="msg" ng-hide="showIt"&gt;
      &lt;div class="icon"&gt;&lt;img src="img1.jpg" /&gt;&lt;/div&gt;
      &lt;div class="text"&gt;Some text 1&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="msg" ng-hide="showIt"&gt;
      &lt;div class="icon"&gt;&lt;img src="img2.jpg" /&gt;&lt;/div&gt;
      &lt;div class="text"&gt;Some text 2&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and CSS</p>
  
  <pre><code>.cont {
    position: fixed;
    bottom: 0px;
    left: 5px;
    right: 5px;
  }
  
  .msg {
    border: 1px solid grey;
    background-color: #eee;
    padding: 10px;
    overflow: hidden;
  /*  height:50px; THIS MAKES IT WORK, BUT I DON'T WANT TO FIX HEIGHT */
  }
  
  .msg img {  
    float: left;
    margin-right: 10px;
    height: 30px;
  }
  
  .msg .text {
    overflow:hidden;
    font-size: 13px;
    text-align: center;
  }
  
  .msg.ng-hide-add {
    transition: all 2s ease-in-out; 
    -moz-transition: all 2s ease-in-out; 
    -o-transition: all 2s ease-in-out; 
    -webkit-transition: all 2s ease-in-out; 
  }
  
  .msg.ng-hide {
    height: 0; /* TRANSITION TO 0 ISN'T SMOOTH UNLESS INITIAL HEIGHT OF .msg IS SPECIFIED */
    padding-top: 0;
    padding-bottom: 0;
    border: 0;
  }
  </code></pre>
  
  <p>I'm using AngularJS ngAnimate, but that's not relevant to the question. Angular simply adds the ng-hide classes when necessary.  </p>
  
  <p>Further requirements:</p>
  
  <ul>
  <li>Pure CSS solution if possible</li>
  <li>No fixed height as in the <code>.msg</code> commented out section.  While this works, it means that I can't have height set dynamically by the content</li>
  <li>No dynamically generated height style (eg by using jQuery to calculate and explicitly set the height style on each <code>.msg</code>)</li>
  <li>No setting transitions styles on EVERY content element (eg <code>.msg.ng-hide img { height: 0; }</code>). I can get this working, but the contents of each <code>.msg</code> is dynamic, so each time I introduce more/different child elements I have to add transition styles to each one. Much uglier than just shrinking the parent.</li>
  </ul>