title: Animating a flexbox from "auto"
body: <p>I'm trying to animate a flexbox from an "auto" state where most things are auto-sized to a state where one thing is sized.</p>
  
  <pre><code>|auto|this fills most space          |auto|
  
  to
  
  |auto|this...|auto                        |
  </code></pre>
  
  <p>demo: <a href="http://codepen.io/kaaaahhhhnnnn/pen/vOJpwo" rel="nofollow">http://codepen.io/kaaaahhhhnnnn/pen/vOJpwo</a></p>
  
  <p>When you hover you'll see what I want.  If you remove the comment in the CSS:</p>
  
  <pre><code>li
    // flex 1
  </code></pre>
  
  <p>you'll see that it now animates, but the sizes aren't what I want.</p>
  
  <p>The problem is that I can't figure out how to get the 1st state with the <code>flex</code> properties existing and I can't figure out how to get the 2nd without it.  So I can't animate between the two.</p>