title: CSS height animation on element with dynamic height
body: <p>I have a div with dynamic height, and I want to use animation when the height grows. The problem is that I can't set the div's height (it has to be dynamic), so there's nothing to animate on.</p>
  
  <pre><code>.text {
    transition: all .3s ease-in-out;
    min-height: 20px;
    max-height: 200px;
    overflow: auto;
  }
  
  .max {
    transition: all .3s ease-in-out;
    height: 200px;
    min-height: 200px;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/abk7yu34/5/" rel="noreferrer">https://jsfiddle.net/abk7yu34/5/</a></p>
  
  <p>Note that the shrinking animation works because the div has min-height.</p>
  
  <p>Is there a way to solve this in pure CSS?</p>