margin-top solo cuando el elemento flexible está envuelto

Tengo un contenedor flexible con dos elementos flexibles. Quiero establecer un margen superior en el segundo, pero solo cuando esté envuelto y no en la primera línea flexible.

Si es posible, quiero evitar el uso de consultas de medios.

Pensé que el margen inferior en el primer elemento podría ser una solución. Sin embargo, agrega espacio en la parte inferior cuando los elementos no están envueltos, por lo que es el mismo problema.

Este es mi codigo:

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

Puede agregar algo margin-topa ambos elementos flexibles y un negativo margin-topde la misma cantidad al contenedor flexible.

De esta manera, el margen negativo del contenedor flexible neutralizará el margen de los elementos flexibles en la primera línea, pero no el margen de los elementos que se ajustaron a otras líneas.

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