flexbox container and elements: the display: none elements still occupying space

user_11394297 0
Viewed 2716

I've hidden some of my elements with css property display: none, but somehow they still take up space when my visible elements display.

JSFiddle Here: https://jsfiddle.net/evanF/pdLyto1k/6/

html file

<div id="displayCardsEveryone">

        <a id="selectOneAnchor" href="http://placekitten.com/200/300" data-caption="Card 1">
          <img id="selectone" src="http://placekitten.com/200/300" alt="" />
        </a>

        <a id="selectTwoAnchor" href="http://placekitten.com/200/300" data-caption="Card 2">
          <img id="selecttwo" src="http://placekitten.com/200/300" alt="" />
        </a>

        <a id="selectThreeAnchor" href="http://placekitten.com/200/300" data-caption="Card 3">
          <img id="selectthree" src="http://placekitten.com/200/300" alt="" />
        </a>


        <a id="selectFourAnchor" href="images/img1.jpg" data-caption="Card 4">
          <img id="selectfour" src="images/img1.jpg" alt="" />
        </a>

        <a id="selectFiveAnchor" href="images/img1.jpg" data-caption="Card 5">
          <img id="selectfive" src="images/img1.jpg" alt="" />
        </a>

        <a id="selectSixAnchor" href="images/img1.jpg" data-caption="Card 6">
          <img id="selectsix" src="images/img1.jpg" alt="" />
        </a>

        <a id="selectSevenAnchor" href="images/img1.jpg" data-caption="Card 7">
          <img id="selectseven" src="images/img1.jpg" alt="" />
        </a>

        <a id="selectEightAnchor" href="images/img1.jpg" data-caption="Card 8">
          <img id="selecteight" src="images/img1.jpg" alt="" />
        </a>

        <a id="selectNineAnchor" href="images/img1.jpg" data-caption="Card 9">
          <img id="selectnine" src="images/img1.jpg" alt="" />
        </a>

        <a id="selectTenAnchor" href="images/img1.jpg" data-caption="Card 10">
          <img id="selectten" src="images/img1.jpg" alt="" />
        </a>

css file

body, html
{
    display: flex;
    height: 100vh;
    min-height: 100vh;
    flex-direction: column;
    background-image: url("website flex layout/background5.jpg");
    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; 
 
};

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.

I want #selectone, #selectwo, #selectthree to display and take up the available width.

I believe #selectfour to #selectten are taking up space, despite display: none.

flexbox css html
1 Answers
a {
max-height: 100%;
max-width: 100%;
display: flex;
//flex: 1 1 0; //remove flex: 1 1 0; for from here

}

Because you are giving display: none; for the img which is inside an anchor tag, so still anchor will occupy space.

Or

Give display none for the a element, using nth-child or classes or script.

Then change the order of css as below:

    #selectFourAnchor, #selectFiveAnchor, #selectSixAnchor, 
#selectSevenAnchor, #selectEightAnchor, #selectNineAnchor, #selectTenAnchor {

    display: none; 

};


#selectfour, #selectfive, #selectsix, #selectseven, #selecteight, #selectnine, #selectten {

    display: none;

};


#submitEveryoneChoiceButton, #newRoundButton {

    display: none;

};
user_56214230
Related