親のオーバーフローがhiddenに設定されている場合、子要素の幅を変更します。

Question

子供（緑色）が親（赤色）より広いように折りたたみパネルを設計しました。子には枠線があり、:: beforeと:: afterで追加されたアイコンがあるため、パネル全体が折り畳まれると、子の境界線は親のアニメーションが完成するまで大きく留まります。

私は親のオーバーフローを隠してしまった場合、画面上に留まることを避けることができます。残念なことに、このクリップは子どもたちのスタイリングを行い、意図したとおりに要素を見ることはできません。

親をオーバーフローで非表示にしておき、子が親の幅を超える幅を持つようにする方法はありますか？任意のトリックですか？

Answer 1

あなたが水平に崩壊しているように見えますし、問題は、要素の幅が新しい値への移行を停止するまで、新たな幅に調整しておくことです。

これが正しい場合は、にパネルを折りたたむには、widthを使用するように変更する必要があります。子要素の再レンダリングと、幅がゼロの後に表示される要素を処理する必要があります。