当内容向左浮动时，Materialize css 可折叠不适合其内容

Question

先看这里当div个元素不向左浮动时：https://jsfiddle.net/vdsg824f/

然后看这里当div个元素向左浮动时：https://jsfiddle.net/p07ashn4/9/

我希望像在第一种情况下那样，将可折叠的内容扩展到适合其所有内容。

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>

我该怎么做？

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>

当内容向左浮动时，Materialize css 可折叠不适合其内容

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

materialize