Huge gap when using flex

How can i fix?

output:

https://github.com/NeXTs/Clusterize.js/assets/20538090/a09ab47f-5039-4e5b-bf35-b7e96a9f3c77

Code:

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/clusterize.js@1.0.0/clusterize.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/clusterize.js@1.0.0/clusterize.min.css" rel="stylesheet">
    <style>
      .list {
        display: flex;
        flex-wrap: wrap;
      }
      .item {
        width: 100px;
        height: 100px;
        border: 1px solid black;
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <div id="scrollArea" class="clusterize-scroll">
      <div id="contentArea" class="clusterize-content" style="display: flex; flex-wrap: wrap;">
        <div class="list"></div>
      </div>
    </div>
    <script>
      // Generate some dummy data
      var data = [];
      for (var i = 0; i < 1000; i++) {
        data.push('<div class="item">' + i + '</div>');
      }

      // Initialize Clusterize.js
      var clusterize = new Clusterize({
        scrollId: 'scrollArea',
        contentId: 'contentArea',
        rows_in_block: 50,
        tag: 'div'
      });

      // Update the list with data
      clusterize.update(data);
    </script>
  </body>
</html>

NeXTs / Clusterize.js

Huge gap when using flex #190