CSSの幅と高さのプロパティが機能していません

Question

divを4つの偶数の四角形に均等に分割しようとしています。

display: flexとflex-wrap: wrapのコンテナでは、各divの幅と高さのプロパティが50vhに設定されています。

しかし、表示されているのは四角形divではなく四角形divです。

私は50％に変更しようとしましたが、それは助けになりませんでした。ここに私のコードは次のとおりです。

#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

は、あなたが探しているものを、このですか？

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

私は正方形のdivを得るために、あなたが#containerに

width: 200px; 
height: 200px; 

を追加する必要があると思います。コンテナを最初に正方形に設定する必要があります。