CSS: как увеличить div вместе с его внутренними div

Question

У меня есть это div с тремя внутренними div s.

ONE - I am div   TWO - I am div   THREE - I am div

Но на мобильном телефоне он может поместиться только два div s подряд по горизонтали, мне нужно div s после 2-й шаг вниз.

Вот так:

ONE - I am div   TWO - I am div
        THREE - I am div

Как мне это сделать?

Я использую flex.

Edit

Я добавил код HTML.

Я использую React и другие компоненты пользовательского интерфейса, и я попытался минимизировать его в HTML. Прямо сейчас это примерно так.

<div class="parent">
  <div class="child">
    <span>ONE</span>
    <p>I am div</p>
  </div>
  <div class="child">
    <p>TWO</p>
    <p>I am div</p>
  </div>
  <div class="child">
    <span>THREE</span>
    <p>I am div</p>
  </div>
<div>

.parent {
  display: flex;
  justify-content: space-around;
  margin-bottom: 3rem;
  white-space: nowrap;
}

.child {
  display: flex;
  align-items: center;
  margin-left: 1rem;
  margin-right: 1rem;
}

Answer 1

Это будет работать для адаптивного макета, а также позволяет помещать их в одну строку, если это позволяет размер экрана. Вы можете использовать медиа-запрос, чтобы настроить его только для мобильных устройств.

   .outer{
      display: flex;
      flex-flow: wrap;
      text-align: center;
    }
    .inner{
      flex-grow: 1;
    }

Answer 2

Вы можете использовать flex-wrap , чтобы продолжить на следующей строке. justify-content будет центрировать div

.outer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* Styles below are for demonstration purposes */
.inner {
  height: 50px;
  width: 300px;
}

.red {
  background: red;
}

.green {
  background: green;
}

.blue {
  background: blue;
}

<div class="outer">
  <div class="inner red">A</div>
  <div class="inner green">B</div>
  <div class="inner blue">C</div>
</div>