margin-top hanya jika item flex dibungkus

Saya memiliki wadah fleksibel dengan dua item fleksibel. Saya ingin menetapkan margin-top pada yang kedua, tetapi hanya jika dibungkus dan bukan pada garis fleksibel pertama.

Jika memungkinkan, saya ingin menghindari penggunaan kueri media.

Saya pikir margin-bottom pada elemen pertama bisa menjadi solusi. Namun, itu menambah ruang di bagian bawah ketika elemen tidak dibungkus, jadi masalahnya sama.

Ini kode saya:

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

Anda dapat menambahkan beberapa margin-topke kedua item flex, dan negatif margin-topdengan jumlah yang sama ke wadah flex.

Dengan cara ini, margin negatif dari wadah fleksibel akan menetralkan margin item fleksibel di baris pertama, tetapi bukan margin item yang digabungkan ke baris lain.

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