title: flexbox container and elements: the display: none elements still occupying space
body: <p>I've hidden some of my elements with css property display: none, but somehow they still take up space when my visible elements display.</p>
  <p>JSFiddle Here: <a href="https://jsfiddle.net/evanF/pdLyto1k/6/" rel="nofollow noreferrer">https://jsfiddle.net/evanF/pdLyto1k/6/</a></p>
  <p>html file</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div id=&quot;displayCardsEveryone&quot;&gt;
  
          &lt;a id=&quot;selectOneAnchor&quot; href=&quot;http://placekitten.com/200/300&quot; data-caption=&quot;Card 1&quot;&gt;
            &lt;img id=&quot;selectone&quot; src=&quot;http://placekitten.com/200/300&quot; alt=&quot;&quot; /&gt;
          &lt;/a&gt;
  
          &lt;a id=&quot;selectTwoAnchor&quot; href=&quot;http://placekitten.com/200/300&quot; data-caption=&quot;Card 2&quot;&gt;
            &lt;img id=&quot;selecttwo&quot; src=&quot;http://placekitten.com/200/300&quot; alt=&quot;&quot; /&gt;
          &lt;/a&gt;
  
          &lt;a id=&quot;selectThreeAnchor&quot; href=&quot;http://placekitten.com/200/300&quot; data-caption=&quot;Card 3&quot;&gt;
            &lt;img id=&quot;selectthree&quot; src=&quot;http://placekitten.com/200/300&quot; alt=&quot;&quot; /&gt;
          &lt;/a&gt;
  
  
          &lt;a id=&quot;selectFourAnchor&quot; href=&quot;images/img1.jpg&quot; data-caption=&quot;Card 4&quot;&gt;
            &lt;img id=&quot;selectfour&quot; src=&quot;images/img1.jpg&quot; alt=&quot;&quot; /&gt;
          &lt;/a&gt;
  
          &lt;a id=&quot;selectFiveAnchor&quot; href=&quot;images/img1.jpg&quot; data-caption=&quot;Card 5&quot;&gt;
            &lt;img id=&quot;selectfive&quot; src=&quot;images/img1.jpg&quot; alt=&quot;&quot; /&gt;
          &lt;/a&gt;
  
          &lt;a id=&quot;selectSixAnchor&quot; href=&quot;images/img1.jpg&quot; data-caption=&quot;Card 6&quot;&gt;
            &lt;img id=&quot;selectsix&quot; src=&quot;images/img1.jpg&quot; alt=&quot;&quot; /&gt;
          &lt;/a&gt;
  
          &lt;a id=&quot;selectSevenAnchor&quot; href=&quot;images/img1.jpg&quot; data-caption=&quot;Card 7&quot;&gt;
            &lt;img id=&quot;selectseven&quot; src=&quot;images/img1.jpg&quot; alt=&quot;&quot; /&gt;
          &lt;/a&gt;
  
          &lt;a id=&quot;selectEightAnchor&quot; href=&quot;images/img1.jpg&quot; data-caption=&quot;Card 8&quot;&gt;
            &lt;img id=&quot;selecteight&quot; src=&quot;images/img1.jpg&quot; alt=&quot;&quot; /&gt;
          &lt;/a&gt;
  
          &lt;a id=&quot;selectNineAnchor&quot; href=&quot;images/img1.jpg&quot; data-caption=&quot;Card 9&quot;&gt;
            &lt;img id=&quot;selectnine&quot; src=&quot;images/img1.jpg&quot; alt=&quot;&quot; /&gt;
          &lt;/a&gt;
  
          &lt;a id=&quot;selectTenAnchor&quot; href=&quot;images/img1.jpg&quot; data-caption=&quot;Card 10&quot;&gt;
            &lt;img id=&quot;selectten&quot; src=&quot;images/img1.jpg&quot; alt=&quot;&quot; /&gt;
          &lt;/a&gt; 
  
  </code></pre>
  <p>css file</p>
  <pre class="lang-css prettyprint-override"><code>body, html
  {
      display: flex;
      height: 100vh;
      min-height: 100vh;
      flex-direction: column;
      background-image: url(&quot;website flex layout/background5.jpg&quot;);
      background-repeat: no-repeat;
      background-size: 100% 100%;
  
      /*overflow: hidden;*/
  
      margin: 0;
      padding: 0;
  
  }
  
  
  a {
      max-height: 100%;
      max-width: 100%;
      display: flex;
      flex: 1 1 0;
  }
  
  
  img {
  
      margin-left: 10px;
      margin-top: 10px;
      margin-right: 10px;
      margin-bottom: 10px; 
  
      max-height: 100%; 
      max-width: 75%;
  
      object-fit: fill;
      flex: 1 1 0; 
      min-width: 0%;
      min-height: 0%;
  
  
  }
  
  
  .flex-container3 {
  
      display: flex;
      height: auto;
      min-height: 25vh;
  
  }
  
  
  #displayCardsEveryone {
  
      display: flex;
      flex: 5;
      justify-content: center;
      align-items: center;
      border-top: solid 4px #00e673;
  
  }
  
  #selectfour, #selectfive, #selectsix, #selectseven, #selecteight, #selectnine, #selectten {
  
      display: none;
  
  };
  
  #selectFourAnchor, #selectFiveAnchor, #selectSixAnchor, 
  #selectSevenAnchor, #selectEightAnchor, #selectNineAnchor, #selectTenAnchor {
  
      display: none; 
   
  };
  </code></pre>
  <p>I want the automatic sizing and positioning of the elements to be as though only those 3 visible elements exist, but somehow flexbox sizing and centering takes into account the display: none ones too.</p>
  <p>I want #selectone, #selectwo, #selectthree to display and take up the available width.</p>
  <p>I believe #selectfour to #selectten are taking up space, despite <code>display: none</code>.</p>