これも可能ですか？基本的な設定は、右側にdiv要素が含まれるサイドバーです。これらの要素の1つをクリックすると、「popout」divが追加され、クリックした要素の左側に表示されます。ポップアウトには、可変数のボタンが含まれています。CSSのみを使用してスタイルを設定したいので、スクリプトから正しいHTML要素を追加して、スタイルシートにレイアウトを実行させることができます。
- サイドバー要素の内側にポップアウトを配置し、絶対に配置しましたが、サイドバー要素自体を少なくともポップアウトと同じ高さに拡大縮小することはできません。（サイドバー要素は通常、ポップアウトよりも高さが短くなっています）。
- 要素の前にポップアウトを配置し、絶対位置を使用してみましたが、何らかの理由で、ボタンを追加してもポップアウトが広くならず、代わりにボタンが下にオーバーフローします。
- ポップアウトで相対位置を使用すると、サイドバーにあったはずの場所に空きスペースが残ります。
- フローティングすると、他のサイドバー要素の幅が乱れます。
サイドバーは固定幅です。ポップアウトは固定高です。ボタンは固定サイズです。サイドバー要素は全幅ですが、高さは可変です。
私は私が試したすべてのさまざまなことを見失いました。現時点での私の最も近い試みは、このJsFiddleで、ポップアウトは正しく配置されていますが、左方向には成長せず、下方向にオーバーフローするだけです。幅を大きく設定するとボタンが正しく整列しますが、：hover疑似クラスを追加すると奇妙なことが起こります。
これはHTML/CSSでどのように行うことができますか？それともJavaScriptを使用してのみ可能ですか？もしそうなら、これを行うための単純な「邪魔にならない」アプローチは何でしょうか？