Bug wrap flexbox

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

Je souhaite que mes div wrap correctement. Hors, quand ca wrap, ca sort de la div parente :

https://zupimages.net/viewer.php?id=20/10/y13g.png

Voici le code :

<div id="wrap">
    <div class="content">
          <div id="playerlist">
              <div class="pop">ddddddddddd</div>
              <div class="pop">ddddddddddd</div>
              <div class="pop">ddddddddddd</div>
          </div>
</div>

CSS

#wrap {
    display: flex;
    justify-content: center;
    margin-top:30px;
}

div.content {
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 1), 0px 2px 10px 0px rgba(0, 0, 0,.5);
    color: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
}

div#playerlist {
    display: flex;
    flex-wrap:wrap;
    flex-direction:column;
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Montserrat', sans-serif;
    color: rgba(255, 255, 255, 0.9);
    font-weight:600;
    border-radius: 0 0 10px 10px;
    max-height:calc(100vh - 130px);
    width: 100%;
    background: rgba(26, 26, 26, 0.8);
}

Je n'arrive pas à comprendre pourquoi le Wrap dépasse et ne redimentionne pas correctement la div parente ...

Si vous avez des idées :)

Merci