Divs in container don't have the height I defined

Question

I defined ...

container{    
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

And the items inside that container are defined...

item{    
    border: 0.5px solid rgb(117, 115, 115);
    position: relative;
    width: 10%;
    height: 22%;
    display: block;
    margin: 2%;
}

I was expecting rows of items with the height and width I defined, basically boxes in rows. But the items don't have a height of 22% of the container as I defined, they are just stripes with no space between.

We need a [mcve]. Post your HTML as well please – j08691 Apr 21 '23 at 15:33 — j08691, Apr 21 '23 at 15:33
https://stackoverflow.com/a/31728799/3597276 – Michael Benjamin Apr 21 '23 at 18:02 — Michael Benjamin, Apr 21 '23 at 18:02

score 0 · Answer 1 · answered Apr 21 '23 at 16:17

0

The % unit for height won't work that way since there is not height set in the parent element.

Try using vh using for the parent container like this,

.container{    
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    height: 100vh;                /* add this line */
}

Output:

answered Apr 21 '23 at 16:17

SandyKrish

222
1
11

can you add up vote my and answer and mark it as correct. – SandyKrish Apr 21 '23 at 16:46

Divs in container don't have the height I defined

1 Answers1