Margin-top только тогда, когда гибкий элемент обернут

У меня есть гибкий контейнер с двумя элементами гибкости. Я хочу установить margin-top на втором, но только тогда, когда он завернут, а не на первую гибкую линию.

Если возможно, я хочу избежать использования медиа-запросов.

Я думал, что крайним элементом первого элемента может быть решение. Тем не менее, он добавляет пространство внизу, когда элементы не обертываются, поэтому такая же проблема.

Это мой код:

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.item-big {
  background: blue;
  width: 300px;
}
.item-small {
  background: red;
  margin-top: 30px;
}

<div class="container">
  <div class="item-big">
    FIRST BIG ELEM
  </div>
  <div class="item-small">
    SECOND SMALL ELEM
  </div>
</div>

Ответ 1

Вы можете добавить margin-top как для гибких элементов, так и для отрицательного margin-top той же суммы в контейнер flex.

Таким образом, отрицательный край контейнера flex будет нейтрализовать границу элементов гибкости в первой строке, но не маржу элементов, которые завернуты в другие строки.

.container {
  margin-top: -30px;
}
.item-big, .item-small {
  margin-top: 30px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: -30px;
}
.item-big, .item-small {
  margin-top: 30px;
  background: red;
}
.item-big {
  background: blue;
  width: 300px;
}

<div class="container">
   <div class="item-big">
      FIRST BIG ELEM
   </div>
   <div class="item-small">
      SECOND SMALL ELEM
   </div>
</div>

Ответ 2

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.item-big {
    background: blue;
    margin-top: 30px;
    width: 300px;
}

.item-small {
    background: red;
    margin-top: 30px;
    width: 300px;
}

<div class="container">

   <div class="item-big">
      FIRST BIG ELEM
   </div>
   
   <div class="item-small">
      SECOND SMALL ELEM
   </div>
</div>