Animation doesn't work inside bounded flexboxes

[itayganor]

When <AnimateHeight/> is inside a bounded flexbox (a flexbox that has a limit in its main flex axis, i.e. a div with display: flex; flex-direction: column; height: 100px;), the variable height value during the animation doesn't count.
In this case, <AnimateHeight/> should consider itself as a flexbox child, and have flex-shrink: 0 for the height property to work as expected.

Code example

https://codesandbox.io/s/react-animate-height-flex-tsu4k
Press Prepend random number to add items to the top of the list. Click it enough times until the whole .logs div is full (in terms of height). Then, watch how the height property doesn't do anything.

Expected behavior

Height should be animated.

Possible Solution

Add flex-shrink: 0 to the animated div, while animated.
Currently achievable by:

<AnimateHeight style={{flexShrink: 0}}>content</AnimateHeight>

But there's no actual reason to explicitly set it every time.

Your Environment

• Version used: 2.0.20
• OS: Windows 10
• Browser: Chrome 81

[Stanko]

Nice catch, I'll see what I can do. Adding flex-shrink seems a bit hacky though.

[itayganor]

Nice catch, I'll see what I can do. Adding flex-shrink seems a bit hacky though.

Why hacky? it's exactly what's happening; the animated div gets shrunk because flexbox takes other calculations into account before height values (or width when flex-direction: row;).
flex-shrink: 0 is like saying "Ay papa, let me decide my own size!"

[Stanko]

Sorry, I wasn't clear. It feels hacky to add styles that fix very specific issue.

EDIT: Honestly I feel this shouldn't be hard coded in the library itself. Instead user should add a class name and flex-shrink: 0 rule to that specific class. But it should be definitely covered by the library's documentation.

[Stanko]

I added "Gotchas" section to the readme to explain this scenario:
https://github.com/Stanko/react-animate-height#bounded-flexboxes