CSS flexbox with height not displaying

Question

I have the following html page, which shows an empty page in all browsers.

However, if I give a absolute value of height for the class
flexContainer, then it works fine.

Can anyone please help me understand why? What am I missing?

Should it not calculate the height automatically from the document body size?

<!doctype html>
<html>
 <head>

<style>
.flexContainer{
 display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content: space-between;
box-shadow: 3px 1px 4px 0px black;
height:50%;
width:90%;
}

.flexElmContainer
{
width:50%;
display:flex;
}

.flexElmContainer:nth-of-type(1n)  > .flexElm{
background-color: #3498DB;
transform:rotate(30deg);
width:50%;
height:50%;
margin:auto;
}

.flexElmContainer:nth-of-type(2n) > .flexElm{
 background-color: #E74C3C;
transform:rotate(30deg);
 width:50%;
height:50%;
margin:auto;
}
</style>
</head>
 <body>
<div id='cont' class='flexContainer'>
<div class='flexElmContainer'>
        <div class='flexElm'>
        </div>          
</div>

<div class='flexElmContainer'>
        <div class='flexElm'>
        </div>
</div>

<div class='flexElmContainer'>
        <div class='flexElm'>
        </div>
</div>

<div class='flexElmContainer'>
        <div class='flexElm'>
        </div>
</div>

<div class='flexElmContainer'>
        <div class='flexElm'>
        </div>
</div>

<div class='flexElmContainer'>
        <div class='flexElm'>
        </div>
</div>
</div>
 </body>
</html>

I accept the link as provided by @Temani Afif as the correct answer. — Shibasis Sengupta, May 30 '18 at 02:26

vishnu v nair · Answer 1 · 2018-05-29T03:59:27.457

Try this code and check this link to height: 100% not working

  .flexContainer{
            display:flex;
            flex-direction:row;
            flex-wrap:wrap;
            justify-content: space-between;
            box-shadow: 3px 1px 4px 0px black;
            height:50vh;
            width:90%;
        }

        .flexElmContainer
        {
            width:50%;
            display:flex;
        }

        .flexElmContainer:nth-of-type(1n)  > .flexElm{
            background-color: #3498DB;
            transform:rotate(30deg);
            width:50%;
            height:50%;
            margin:auto;
        }

        .flexElmContainer:nth-of-type(2n) > .flexElm{
            background-color: #E74C3C;
            transform:rotate(30deg);
            width:50%;
            height:50%;
            margin:auto;
        }

<div id='cont' class='flexContainer'>
    <div class='flexElmContainer'>
        <div class='flexElm'>
        </div>
    </div>

    <div class='flexElmContainer'>
        <div class='flexElm'>
        </div>
    </div>

    <div class='flexElmContainer'>
        <div class='flexElm'>
        </div>
    </div>

    <div class='flexElmContainer'>
        <div class='flexElm'>
        </div>
    </div>

    <div class='flexElmContainer'>
        <div class='flexElm'>
        </div>
    </div>

    <div class='flexElmContainer'>
        <div class='flexElm'>
        </div>
    </div>
</div>

score 0 · Answer 2 · answered May 29 '18 at 06:02

0

Please add the below CSS

body {
    height: 100vh;
}

Demo

answered May 29 '18 at 06:02

Ali

1,326
1
17
38

CSS flexbox with height not displaying

2 Answers2