Animating a flexbox from "auto"

Question

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.

|auto|this fills most space          |auto|

to

|auto|this...|auto                        |

demo: http://codepen.io/kaaaahhhhnnnn/pen/vOJpwo

When you hover you'll see what I want. If you remove the comment in the CSS:

li
  // flex 1

you'll see that it now animates, but the sizes aren't what I want.

The problem is that I can't figure out how to get the 1st state with the flex properties existing and I can't figure out how to get the 2nd without it. So I can't animate between the two.

Answer 1

The documentation on the flex shorthand is

flex |none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]

Where the flex-basis is:

flex-basis | content | <‘width’> and the initial value : auto;

Is the flex-basis animatable?

Animatable: as width

So this property is by the specs only animatable as a width.

Auto is the same as its content. This property is not animatable.

Flex-box w3 specs