html - CSS 宽度和高度属性不起作用

Question

我试图让我的 div 将整个窗口均匀地切割成四个均匀的正方形。

我将每个 div 的宽度和高度属性设置为 50vh 而在带有 display: flex 和 flex-wrap: wrap 的容器中>.

但是显示的是四个矩形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>