title: Animate flex transitions
body: <p>So I don't believe this has been answered elsewhere. I have been looking over CSS tricks and also <a href="http://n12v.com/css-transition-to-from-auto/" rel="noreferrer">http://n12v.com/css-transition-to-from-auto/</a> but am not sure if the following is possible.</p>
  
  <p>What I want to do is animate a flex child if it changes width. That width change <em>could</em> be triggered from within the child itself. Here is some sample code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    width: 600px;
    display: flex;
  }
  
  .flexy {
    transition: all 10s;
    max-width: 500px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="flexy" style="background-color:red;"&gt;This is some random text&lt;/div&gt;
    &lt;div class="flexy" style="background-color:green;"&gt;
      &lt;div style="width:300px"&gt;Resize this to animate?&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="flexy" style="background-color:blue;"&gt;This is some more random text&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So what I want is the flexy boxes to animate to their sizes <strong>and</strong> most importantly if (in say firebug) you change the 300px width to 500px I would want the flexy parent (of the 300px div) to animate too. Is that even possible? </p>