javascript - Flexbox父级的动画宽度不会影响子级?

标签 javascript css flexbox gsap

我正在尝试使用 TweenLite 将蓝色侧边栏的宽度补间到零。不幸的是,蓝色侧边栏的内容超出了父级的范围。

enter image description here

对于 Flexbox 来说,这是绝对不应该发生的事情,但子元素也是 Flex 容器,所以我确定我在这里做错了什么。 :( 如果有人有任何建议请告诉我。谢谢!

这里是现场演示的链接:https://jimtheman.github.io/Flexbox-Push-Drawer-Example/#/ 在这里您可以阅读源代码:https://github.com/JimTheMan/Flexbox-Push-Drawer-Example/tree/gh-pages

ps。我想让这个工作正常,但我正在考虑是否有一种方法可以在不使用 Flexbox 的情况下让中心绿色部分在蓝色柱收缩时拉伸(stretch)以填充容器。

最佳答案

在“.whole-app-container”元素上设置overflow:hidden解决了我的问题。

关于javascript - Flexbox父级的动画宽度不会影响子级?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38636707/

相关文章:

javascript - Firebase onAuthStateChange 登录时触发两次

html - 如何在容器内垂直和水平居中元素?

javascript - 网络音频合成 : how to handle changing the filter cutoff during the attack or release phase?

javascript - 将变量传递给 jquery 选择器

html - 如何在不增加 div 大小的情况下在 HTML 中应用填充?

html - 将两个相邻的 div 与左向文本水平对齐

css - CSS 验证不再相关了吗?

html - Flex 页眉、内容、页脚布局

css - 如何使 flexbox 中的 div 出现在下一行?

javascript - 为什么 number + string 在 javascript 中是一个字符串?