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 единиц, размер ваших флекс-элементов всегда будет в процентах от размера области просмотра.Без какого-либо содержимого в элементах они могут просто уменьшаться до нуля.Это проблема, когда требуется обернуть элементы со стандартным процентом или длиной в процентах области просмотра.

Использовать фиксированную единицу измерения.

Вместо этого:

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>