Animating Width of Flexbox Parent Doesn't Affect Children?

[Flash Floods]

Hi, I'm trying to use TweenLite to tween in the width of the blue sidebar down to zero. Unfortunately, the content of the blue sidebar breaks outside of the bounds of the parent.

 

This is something that really should never happen with Flexbox, but the child elements are also Flex containers so I'm sure what I'm doing wrong here. If anyone has any suggestions please let me know. Thanks! 

 

Here a link tot he live demo: https://jimtheman.github.io/Flexbox-Push-Drawer-Example/#/

And here you can read the source code: https://github.com/JimTheMan/Flexbox-Push-Drawer-Example/tree/gh-pages

 

ps. Id like to get this working, but I'm wordering if there is a way to get the center green piece to stretch to fill the container as the blue column shrinks without using Flexbox.

See the Pen by (@) on CodePen.

[Jonathan]

Hello Flash Floods, and Welcome to the GreenSock Forum!

 

Thank you for the examples, but its best if you create a limited codepen example. This way we can test your code live. Unfortunately it is really difficult to test your code without being able to edit the code in a live editable environment.

 

Here is a video tut on how to create a codepen demo example so we can test your code live:

 

 

Thanks

[OSUblake]

Try to make a demo next time, but you can position the children absolutely.

See the Pen fb80c3038dae04e6575566d25c87b4af?editors=0010 by osublake (@osublake) on CodePen.

 

Here's a demo where I animate every flexbox property. All the width and height animations are done using children that are positioned absolutely.

See the Pen dMLQJr?editors=0010 by osublake (@osublake) on CodePen.