eccoci...

Cerco di sintetizzare. Certamente il posizionamento assoluto dato alle 2 immagini fa collassare il contenitore (.full-image) dal momento che questo non possiede dimensioni proprie.

A meno di non impostare delle dimensioni per .full-image, potresti impostare come absolute solo l'immagine aggiuntiva (.next-img), lasciando quindi la prima (.active-img) all'interno del flusso dei contenuti ed evitando così che il contenitore collassi.

Andrei quindi ad inserire una regola specifica per .next-img dove impostare il posizionamento assoluto.

Consiglio inoltre di applicare il bordo al contenitore piuttosto che alle immagini al suo interno. Questo permette di avere sempre un bordo ben definito e fisso a prescindere dagli effetti che possono essere applicati alle immagini.

Ancora, consiglio di non impostare il padding nel contenitore. Questo infatti andrebbe ad alterare le proprie dimensioni (anche in base al valore del box-sizing) con la conseguenza che sarà difficile posizionare/dimensionare correttamente le immagini al suo interno.
In questo caso potresti applicare un margin anziché un padding.

Un ultimo consiglio. Per evitare possibili distorsioni al rapporto d'aspetto delle immagini ("aspect ratio") quando il contenitore si ridimensiona in maniera responsive, può essere utile applicare alla immagini object-fit:cover.

Prova ad aggiungere/modificare le seguenti regole:
codice:
.full-image {
  position: relative;
  flex: 1;
  margin-left: 2%;
  border: 1px solid #888;
}
.full-image > .next-img {
  position: absolute;
  left: 0;
}
.full-image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s;
}





Nota a margine:

Nel tuo codice, in questa regola c'è un errore (forse di copia-incolla) nel valore applicato a filter:
codice:
.thumbnails img {
[...]
filter: brightness(100%), filter .3s ease-in-out;
}
è riportata una parte del valore che hai applicato alla transizione. Ovviamente non ci sta a fare nulla qui.