Materialize css collapsible does not fit its content when content floats left

Question

First look at here when div elements do not float left: https://jsfiddle.net/vdsg824f/

And then look at here when div elements float left: https://jsfiddle.net/p07ashn4/9/

I want that the collapsible to extent itself to fit all its content as in first case.

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.collapsible');
    var instances = M.Collapsible.init(elems, {accordion: true});
  });

.card {
    float: left;
    width: 300px;
    margin: 3px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="collapsible">
      <li>
        <div class="collapsible-header">List View</div>
        <div class="collapsible-body" id="PublicList">
  acaba
        </div>
      </li>
      <li>
        <div class="collapsible-header">Thumbnail View</div>
        <div class="collapsible-body" id="PublicCard">
          <div class="testWrapper">
      <div class="card  blue-grey darken-1" data-acaba="3">
        <div class="card-content white-text">
          <span class="card-title">Card Title 2</span>
          <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
          <a href="#">This is a link</a>
        </div>
      </div>
      
      <div class="card  blue-grey darken-1" data-acaba="1">
        <div class="card-content white-text">
          <span class="card-title">Card Title 3</span>
          <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
          <a href="#">This is a link</a>
        </div>
      </div>
      
      <div class="card  blue-grey darken-1" data-acaba="2">
        <div class="card-content white-text">
          <span class="card-title">Card Title 1</span>
          <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
          <a href="#">This is a link</a>
        </div>
      </div>

How can I do that?

Answer 1

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.collapsible');
    var instances = M.Collapsible.init(elems, {accordion: true});
  });

.card {
    float: left;
    width: 300px;
    margin: 3px;
}

.testWrapper {

  width:100%;
   display: flex;
   flex-wrap: wrap;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="collapsible">
      <li>
        <div class="collapsible-header">List View</div>
        <div class="collapsible-body" id="PublicList">
  acaba
        </div>
      </li>
      <li>
        <div class="collapsible-header">Thumbnail View</div>
        <div class="collapsible-body" id="PublicCard">
          <div class="testWrapper">
      <div class="card  blue-grey darken-1" data-acaba="3">
        <div class="card-content white-text">
          <span class="card-title">Card Title 2</span>
          <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
          <a href="#">This is a link</a>
        </div>
      </div>
      
      <div class="card  blue-grey darken-1" data-acaba="1">
        <div class="card-content white-text">
          <span class="card-title">Card Title 3</span>
          <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
          <a href="#">This is a link</a>
        </div>
      </div>
      
      <div class="card  blue-grey darken-1" data-acaba="2">
        <div class="card-content white-text">
          <span class="card-title">Card Title 1</span>
          <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
          <a href="#">This is a link</a>
        </div>
      </div>