title: Transition flex-grow with dynamic content height
body: <p>I'm displaying a list of items. Each item has a header and some content. Each item's height expands/collapses when its header is clicked. The height of each item's content is dynamic.</p>
  
  <p>I've got the following code (seen below) which works. However, there is a slight delay between the user clicking on <code>.header</code> and the transition beginning.</p>
  
  <p>This delay appears to be introduced by my use of <code>max-height: min-content</code>. I believe the browser needs a moment to re-calculate the height of the content after the<code>.isCollapsed</code> class is added/removed.</p>
  
  <p>I'm wondering if there's a more correct way to achieve this effect?</p>
  
  <p>If I remove <code>max-height: min-content</code> then <code>flex: 1</code> on <code>.item</code> causes each item to be the same height when expanded. This is not desired. I want each item's height to fit its contents.</p>
  
  <p>I do not want a solution which requires me to measure the text in JavaScript or similar. The goal is to leverage flexbox to perform the transition without knowing the height of <code>content</code>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.header').click(function() {
    $(this).parent().toggleClass('isCollapsed');
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  html,
  body {
    height: 100%;
    margin: 0;
  }
  ul,
  li {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .items {
    display: flex;
    flex-direction: column;
    height: 100%;
    flex: 1;
  }
  .item {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 48px;
    transition: flex-grow 1s;
    flex: 1;
    max-height: min-content;
  }
  .header {
    display: flex;
    height: 48px;
    padding: 16px;
    align-items: center;
    flex-shrink: 0;
  }
  .isCollapsed {
    flex-grow: .001;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;ul class='items'&gt;
    &lt;li class='item'&gt;
      &lt;div class='header'&gt;Item A Header&lt;/div&gt;
      &lt;div class='content'&gt;Item A Content This content is&lt;/br&gt;
        really&lt;/br&gt;
        really&lt;/br&gt;
        really&lt;/br&gt;
        really&lt;/br&gt;
        long.
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class='item'&gt;
      &lt;div class='header'&gt;Item B Header&lt;/div&gt;
      &lt;div class='content'&gt;
        Item B Content This content is&lt;/br&gt;
        short.
      &lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>