防止css改变元素宽度

Question

当我的窗户处于完全模式时，它们看起来很正常（见图片）

但是当它在较小的屏幕上时：

变得长形。我只是希望它保持一个正方形而不是改变形式。

我的HTML和CSS：

<div id="logo">
<img src="http://i.cubeupload.com/jmdKlW.png"/>
</div>
<div id="title">
<h3>Who's watching</h3>
</div>
<div class="divOuter">
 <div class="divInner1">First DIV</div>
 <div class="divInner2">Second DIV</div>
 <div class="divInner3">Third DIV</div>
 <div class="divInner4">Third DIV</div>

</div>
<div class="divOuter">
 <div class="divInner5">Desseh</div>
 <div class="divInner6">Anna</div>
 <div class="divInner7">Sia</div>
 <div class="divInner8">Lucas</div>
</div>

CSS：

.divOuter {
  width: 50%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.divInner1,
.divInner2,
.divInner3,
.divInner4  {
  border: .3em solid rgba(0,0,0,.4);
  width: 150px;
  height: auto;
  margin-left: 3px;
  margin-right: 3px;
  margin-top: 50px;
  text-align: center;
  display: inline-block;
  flex:1;}

.divInner1  {
  background:grey;
}
.divInner2  {
  background:grey;
}
.divInner3  {
  background:grey;
}
.divInner4  {
  background:grey;
}

  .divInner1:hover  {
  border: .3em solid white;
}
  .divInner2:hover  {
  border: .3em solid white;
}
  .divInner3:hover  {
  border: .3em solid white;
}
  .divInner4:hover  {
  border: .3em solid white;
}


.divInner5,
.divInner6,
.divInner7,
.divInner8  {
  margin-left: 3px;
  margin-right: 3px;
  margin-top: 20px;
  text-align: center;
  display: inline-block;
  flex:1;
  color:grey;
  font-size: 24px;

可以在xat.me/madses1996找到一个工作示例？ 我认为这与使用flex来集中事物这一事实有关。有没有办法让它像这样，但当我缩小我的浏览器时，它保持方形？

我似乎无法单独编辑这些框

Answer 1

一个选项是将那些具有flex属性的div放在其中。

<div class="divOuter">
  <div class="divInner1"><div class="stay-square">First DIV</div></div>
  <div class="divInner2"><div class="stay-square">Second DIV</div></div>
  <div class="divInner3"><div class="stay-square">Third DIV</div></div>
  <div class="divInner4"><div class="stay-square">Third DIV</div></div>
</div>

为它们设置样式，使高度和宽度相同：

.stay-square { height:150px; width:150px; }

您也可以使用@media根据屏幕尺寸调整样式。

还将一些样式从外部div转移到内部div：

.divInner1,
.divInner2,
.divInner3,
.divInner4  {
  text-align: center;
  display: inline-block;
  flex:1;
}

to ...（我还从外部div中删除了背景样式并将其放在内部div中）

.stay-square {
  width:150px;
  height:150px;
  border: .3em solid rgba(0,0,0,.4);
  margin-left: 3px;
  margin-right: 3px;
  margin-top: 50px;
  background:grey;
 }