CSS width and height property is not working

Question

I am trying to get my divs to cut the entire window evenly into four even squares.

I have the width and height property of each div set to 50vh while in a container with display: flex and flex-wrap: wrap .

But what is being displayed is four rectangular divs, not square divs at all.

I tried changing it to 50% but that did not help. Here is my code:

 #container { display: flex; flex-wrap: wrap; } .square { height: 50vh; width: 50vh; border: 1px solid black; } 

 <div id="container"> <div class="square">Britt</div> <div class="square">JOn</div> <div class="square">Devin</div> <div class="square">Brevin</div> </div> 

Answer 1

Is this what you are looking for?

 html, body { margin: 0; } #container { display: flex; flex-wrap: wrap; } .square { flex-basis: 50%; height: 50vw; border: 1px solid black; box-sizing: border-box; } 

 <div id="container"> <div class="square">Britt</div> <div class="square">JOn</div> <div class="square">Devin</div> <div class="square">Brevin</div> </div> 

Answer 2

I think in order to get square divs, you need to add

width: 200px;
height: 200px;

to your #container. You need to set the container as square first.