baltoro baltoro - 3 years ago 156
CSS Question

Move one flex-item move out from flex-container

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?

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download