Last accordion item expanding outside visible area on initial click

I’m not entirely sure how to explain my problem, so here are some step-by-step instructions to reproduce what I observe:

1.  Go directly to the bottom to click the item 5.

Details appear outside .list-container so they are not visible.

To see the details, you need to scroll further down manually, even though you were already at the bottom of the page.

Now that you can see the details and you are at the very bottom:

1.  Click on item 5 again to hide the details.
2.  Click on item 5 once more to show the details.

This time, details appear inside .list-container so they are immediately visible. [desired behavior]

Question:
Is it possible to configure my page so this desired behavior happens on the first interaction, without requiring manual further down scrolling?

document.addEventListener('DOMContentLoaded', () => {
  // Sélectionner toutes les lignes avec une classe spécifique
  const rows = document.querySelectorAll('.row-container');

  rows.forEach(row => {
      row.addEventListener('click', () => {
          // Trouver le volet associé
          const details = row.nextElementSibling;

          if (details.classList.contains('open')) {
              // Fermer le volet si déjà ouvert
              details.classList.remove('open');
              details.classList.add('close');
          } else {
              // Fermer tous les autres volets
              document.querySelectorAll('.row-details.open').forEach(openDetail => {
                  openDetail.classList.remove('open');
                  openDetail.classList.add('close');
              });

              // Ouvrir le volet sélectionné
              details.classList.remove('close');
              details.classList.add('open');
          }
      });
  });
});

:root {
    --dropdown-height: calc(1.25*.65rem + 1rem);
}

.list-container {
    height: 20dvh;
    overflow-y: auto;
}

/* ## Configuration volet déroulant ## */
.row-container {
    height: 50px;
}

.row-details {
    height: 0;
    position: relative;
    overflow: hidden;
    background-color: #f9f9f9;
    box-shadow: inset 0 1px 0 0 #e6e6e6;
    border-bottom: 2px solid #e6e6e6;
    z-index: -1;
    line-height: 1.25;
}

.row-details.open {
    animation: slideDown 0.3s ease;
    height: var(--dropdown-height);
}

.row-details.close {
    animation: slideUp 0.3s ease;
}

@keyframes slideDown {
    from {
        height: 0;
    }
    to {
        height: var(--dropdown-height);
    }
}

@keyframes slideUp {
    from {
        height: var(--dropdown-height);
    }
    to {
        height: 0;
    }
}

.row-details p {
    font-size: 0.65rem;
    margin: .5rem 0;
}

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Accordéon avec Scrolling</title>
</head>
<body>
    <div class="list-container">
        <div class="row-container">Élément 1</div>
        <div class="row-details">
            <p>Contenu de l'accordéon 1</p>
        </div>
        <div class="row-container">Élément 2</div>
        <div class="row-details">
            <p>Contenu de l'accordéon 2</p>
        </div>
        <div class="row-container">Élément 3</div>
        <div class="row-details">
            <p>Contenu de l'accordéon 3</p>
        </div>
        <div class="row-container">Élément 4</div>
        <div class="row-details">
            <p>Contenu de l'accordéon 4</p>
        </div>
        <div class="row-container">Élément 5</div>
        <div class="row-details">
            <p>Contenu de l'accordéon 5</p>
        </div>
    </div>
</body>
</html>