title: Move one flex-item move out from flex-container
body: <p>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". </p>
  
  <pre><code>&lt;div style="display:flex; flex-direction:column"&gt;
    &lt;div style="flex:1 1 auto"&gt;Flex Item which should take it all...&lt;/div&gt;
    &lt;div style="position:absolute"&gt;Not really a Flex Item 1&lt;/div&gt;
    &lt;div style="position:absolute"&gt;Not really a Flex Item 1&lt;/div&gt;
    &lt;div style="position:absolute"&gt;Not really a Flex Item 2&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>A little less hacky version of above:</p>
  
  <pre><code>&lt;div style="display:flex; flex-direction:column"&gt;
    &lt;div style="flex:1 1 auto"&gt;Flex Item which should take it all...&lt;/div&gt;
    &lt;div style="position:absolute"&gt;
       &lt;div&gt;Not really a Flex Item 1&lt;/div&gt;
       &lt;div&gt;Not really a Flex Item 1&lt;/div&gt;
       &lt;div&gt;Not really a Flex Item 2&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Constraints:</strong></p>
  
  <ul>
  <li>I cannot use <code>display:none</code> for those unwanted flex-items. They are actually pop-ups which are by default not visible but later become visible on some user actions. </li>
  <li>I cannot move those flex-items out of the flex-container for some other reasons. </li>
  </ul>
  
  <p>Is there a more cleaner and elegant solution (possible a flexbox based solution?) than using the <code>position: absolute</code> keeping in view the mentioned constraints?</p>