1

Is there a trick to transitioning flex-basis from auto to other values? From what I gather this is the one exception to the rule... which is annoying because it's arguably the most useful.

Here's an example: http://codepen.io/jamiewinder/pen/WrgrEB

Clicking the 'Toggle' button should open the drawer using a transition. The opacity works, but the height - defined using flex-basis - does not. It works if I set flex-basis to a number of pixels, or a percentage, or anything other than auto which means I need to know the height of the content in order to get this working.

Am I missing something?

Barguast
  • 5,926
  • 9
  • 43
  • 73
  • Does this answer your question? [Transition flex-grow of items in a flexbox](https://stackoverflow.com/questions/29625037/transition-flex-grow-of-items-in-a-flexbox) – Liam Apr 22 '22 at 12:42

1 Answers1

3

flex-basis can be animated and transitioned (source). However, like other properties, it can only be done if you set the values to actual length values (like px, %, etc. and calc()). More info can be found in this question.

Community
  • 1
  • 1
Luuuud
  • 4,206
  • 2
  • 25
  • 34
  • That's a shame if so. I'm using this in a flexbox scenario but I'm not sure your last link applies to this (I've had cross-browser issues with mixing max-height and flexboxes before). Thanks. – Barguast Feb 03 '16 at 15:44
  • @Barguast Not trying to get you to use `max-height` for your issue. Just pointing to it, since it's basically the same issue: not being able to transition `auto` values. – Luuuud Feb 03 '16 at 15:49