フレックス・アイテムの移動をフレックス・コンテナから移動する

Question

フレックス・コンテナ内のフレックス・アイテムの1つを親（フレックス・コンテナ）の利用可能なすべてのスペースを占有しなければならない状況があります。したがって、位置を「絶対」に設定することによって、他のフレックスアイテムをDOMから移動させました。

<div style="display:flex; flex-direction:column"> 
    <div style="flex:1 1 auto">Flex Item which should take it all...</div> 
    <div style="position:absolute">Not really a Flex Item 1</div> 
    <div style="position:absolute">Not really a Flex Item 1</div> 
    <div style="position:absolute">Not really a Flex Item 2</div> 
</div> 

上記の少しハックバージョン：

<div style="display:flex; flex-direction:column"> 
    <div style="flex:1 1 auto">Flex Item which should take it all...</div> 
    <div style="position:absolute"> 
    <div>Not really a Flex Item 1</div> 
    <div>Not really a Flex Item 1</div> 
    <div>Not really a Flex Item 2</div> 
    </div> 
</div> 

制約：

• 私は、これらの不要なフレックスの項目についてdisplay:noneを使用することはできません。実際にはポップアップが表示されますが、デフォルトでは表示されませんが、後で一部のユーザー操作で表示されるようになります。
• フレックスアイテムを他の理由でフレックスコンテナから移動できません。

position: absoluteを使用するよりも、より洗練された洗練されたソリューション（フレックスボックスベースのソリューションが可能ですか）がありますか？

Answer 1

height: 0またはwidth: 0を使用できる場合は、position: absolute,display: noneを使用せずにポップアップを非表示にするか、コンテナから削除することができます。

Answer 2

ます。また、それは他の方法でラウンドを行うことができ

：他のすべての要素がまだフレックスアイテムも、あなたが持っている一つの要素position: absolute（height: 100%, width: 100%

で動作するように、このためにコンテナ要素にposition: relativeを追加することを確認してみましょうゼロに高さまたは幅を設定する）

.x { 
 
background: red; 
 
position: relative; 
 
} 
 
.y { 
 
background: green; 
 
position: absolute; 
 
width: 100%; 
 
height: 100%; 
 
}

<div style="display:flex; flex-direction:column" class="x"> 
 
    <div style="flex:1 1 auto" class="y">Flex Item which should take it all...</div> 
 
    <div>Not really a Flex Item 1</div> 
 
    <div>Not really a Flex Item 1</div> 
 
    <div>Not really a Flex Item 2</div> 
 
</div>