Move one flex-item move out from flex-container

Question

I have this situation where I have to make one of the flex-item in a flex container take up all available space of parent (the flex container). Therefore, I moved other flex-items out of DOM by setting position to "absolute".

<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>

A little less hacky version of above:

<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>

Constraints:

I cannot use
display:none
for those unwanted flex-items. They are actually pop-ups which are by default not visible but later become visible on some user actions.

I cannot move those flex-items out of the flex-container for some other reasons.

Is there a more cleaner and elegant solution (possible a flexbox based solution?) than using the

position: absolute

keeping in view the mentioned constraints?

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

If you can use height: 0 or width: 0, you can hide the pop-ups without position: absolute, display: none or removing them from the container.

Move one flex-item move out from flex-container

Sign up