margin-top apenas quando o item flexível é embalado

Eu tenho um contêiner flexível com dois itens flexíveis. Eu quero definir um margin-top no segundo, mas apenas quando estiver embrulhado e não na primeira linha flexível.

Se possível, quero evitar o uso de consultas de mídia.

Achei que a margem inferior do primeiro elemento poderia ser uma solução. No entanto, ele adiciona espaço na parte inferior quando os elementos não são embalados, portanto, mesmo problema.

Este é o meu código:

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

Você pode adicionar alguns margin-topa ambos os flex items e um negativo margin-topdo mesmo valor ao flex container.

Dessa forma, a margem negativa do flex container neutralizará a margem dos flex items na primeira linha, mas não a margem dos itens que quebraram nas outras linhas.

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