margin-top tylko wtedy, gdy element flex jest opakowany

Mam pojemnik elastyczny z dwoma elementami elastycznymi. Chcę ustawić górny margines na drugim, ale tylko wtedy, gdy jest zawinięty, a nie na pierwszej linii elastycznej.

Jeśli to możliwe, chcę unikać zapytań o media.

Pomyślałem, że rozwiązaniem może być dół marginesu na pierwszym elemencie. Jednak dodaje miejsca na dole, gdy elementy nie są zawinięte, więc ten sam problem.

To jest mój kod:

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

Możesz dodać trochę margin-topdo obu elementów elastycznych i ujemną margin-toptę samą kwotę do pojemnika elastycznego.

W ten sposób ujemny margines pojemnika elastycznego zneutralizuje margines elementów elastycznych w pierwszej linii, ale nie margines elementów zawiniętych w inne wiersze.

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