当父级溢出设置为隐藏时,更改子元素的宽度

时间:2016-06-22 21:52:12

标签: css

我有一个可折叠面板,其设计方式是儿童(绿色)比父母(红色)宽。因为孩子们有边框,并且通过:: before和:: after添加了图标,当整个面板折叠时,子框架上的边框会保持很大,直到完成父项上的动画。

如果我将父母的溢出更改为隐藏,我可以避免这些恼人的线条停留在屏幕上,不幸的是,这样会影响孩子们的造型,我们也不会看到元素的方式他们是有意的。

有没有办法让隐藏溢出的父级保留并允许子级的宽度超过父级的宽度?任何技巧?

container with overflow set to hidden

1 个答案:

答案 0 :(得分:1)

看起来你正在水平折叠它,问题是元素不断调整到新的宽度,直到宽度停止转换到新值。

如果这是正确的,您可能需要更改使用width将面板折叠为transform: scaleX(0);。在宽度为零之后,它应该处理子元素重新渲染和元素可见。