margin-top лише тоді, коли елемент flex є загорнутим

У мене є гнучкий контейнер з двома гнучкими предметами. Я хочу встановити верхнє поле для другого, але лише тоді, коли воно загорнуте, а не на першому гнучкому рядку.

Якщо можливо, я хочу уникати використання медіа-запитів.

Я думав, що margin-bottom на першому елементі може бути рішенням. Однак це додає місця внизу, коли елементи не загорнуті, тому та сама проблема.

Це мій код:

.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>

Ви можете додати деякі margin-topелементи як до елементів гнучкого, так і до мінуса margin-topтакої ж кількості до контейнера гнучких елементів .

Таким чином, негативне поле флекс-контейнера нейтралізує поле флекс-елементів у першому рядку, але не поле елементів, які перенесено в інші рядки.

.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>