防止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;
 }