Flexbox self-self property not passing?

Question

I tried creating a "button" morphine that slides in another menu.
The idea was based on Codrops. The concept of morphing buttons.

Now it's almost set up, and there are only 2 minor things that annoy me:

• When the "close" button menu is reduced to the bottom without problems , although I set the align-items property in the transition. Does Flexbox not support clicking on the specified property?
• The glyphicon does not correct itself using the alignment and alignment-center elements, so I had to make it dirty by adjusting the top property.

I am a little out of ideas.

JSBin example