html - flex-wrap 不起作用，即使应用了最小宽度

Question

问题是，当我一个接一个地减少浏览器窗口容器时，应该跳转到下一行，并且在最小浏览器窗口宽度下，应该有一个列包含 3 个容器，但是这并没有发生。取而代之的是，容器只是变小并保持在一条线上。我尝试使用最小宽度(它甚至在我粘贴在这里的代码中:p)

body {
  margin: 0;
  padding: 0;
  background-color: #2c3e50;
  font-family: strait, sans-serif;
}

#box {
  box-sizing: border-box;
  margin: 0 auto;
  display: flex;
  min-width: 70vw;
  height: 100vh;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.container {
  min-width: 20vw;
  height: 50vh;
  flex-flow: column wrap;
  border: 2px solid darkgray;
  overflow: hidden;
  background-color: #d9d9d9;
  opacity: 0;
  animation: slide-animation 1s forwards;
}

@keyframes slide-animation {
  from {
    opacity: 0;
    margin-top: 300px;
  }
  to {
    opacity: 1;
    margin-top: 0;
  }
}

<div id="box">
  <div class="container"></div>
  <div class="container"></div>
  <div class="container"></div>
</div>

Answer 1

由于您使用的是 vw 单位，因此 flex 元素的大小将始终是视口(viewport)大小的百分比。元素中没有任何内容，它们可以一直缩小到零。当想要包装具有标准百分比或视口(viewport)百分比长度的元素时，这是一个问题。

使用固定单位。

代替这个:

min-width: 20vw

试试这个:

min-width: 12em

body {
  margin: 0;
  padding: 0;
  background-color: #2c3e50;
  font-family: strait, sans-serif;
}

#box {
  box-sizing: border-box;
  margin: 0 auto;
  display: flex;
  min-width: 70vw;
  height: 100vh;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.container {
  min-width: 12em;
  height: 50vh;
  flex-flow: column wrap;
  border: 2px solid darkgray;
  overflow: hidden;
  background-color: #d9d9d9;
  opacity: 0;
  animation: slide-animation 1s forwards;
}

@keyframes slide-animation {
  from {
    opacity: 0;
    margin-top: 300px;
  }
  to {
    opacity: 1;
    margin-top: 0;
  }
}

<div id="box">
  <div class="container"></div>
  <div class="container"></div>
  <div class="container"></div>
</div>