Rand oben nur, wenn das Flex-Element eingewickelt ist

Ich habe einen Flex-Container mit zwei Flex-Artikeln. Ich möchte einen Rand oben auf den zweiten setzen, aber nur, wenn er gewickelt ist und nicht an der ersten Flexlinie.

Wenn möglich, möchte ich die Verwendung von Medienabfragen vermeiden.

Ich dachte, der untere Rand des ersten Elements könnte eine Lösung sein. Es wird jedoch unten Platz hinzugefügt, wenn die Elemente nicht umbrochen werden, also das gleiche Problem.

Das ist mein Code:

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

Sie können margin-topbeiden Flex-Elementen etwas hinzufügen und margin-topdem Flex-Container ein Negativ in derselben Menge hinzufügen .

Auf diese Weise neutralisiert der negative Rand des Flex-Containers den Rand der Flex-Elemente in der ersten Zeile, nicht jedoch den Rand der Elemente, die in andere Zeilen eingeschlossen wurden.

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