title: Transitions on max-height with relative units not working
body: <p>I am trying to create a transition on max-height with a relative unit (so this CSS can be re-used anywhere).</p>
  <p>I have added a POC below. The toggle button simply adds or removes a class which sets the max-height and has a transition. This example isn't working, but it is delayed by the transition duration (but only on removing the toggled class).</p>
  <p><strong>So I wonder why:</strong></p>
  <ol>
  <li>It isn't showing the animation. I know max-height needs a reference point. But a reference to what?</li>
  <li>If you give everything a fixed unit: The animation will work, but only one way. Why is that?</li>
  </ol>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$( document ).ready(function() {
  
    $('button').click(function() {
          $('div').toggleClass('collapsed');
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
    height: 100%;
    max-height: 100px;
  }
  
  div {
     border: solid 2px pink;
     max-height: 100%;
     transition: max-height 0.5s ease;
     overflow: hidden;
     height: 100px;
  }
  
  div.collapsed {
    max-height: 0;
    transition: max-height 0.5s ease;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="collapsed"&gt; 
  Some text
  &lt;/div&gt;
  
  &lt;button&gt;Toggle class&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>