title: Doesn't Isotope play nice with Flexbox, or is it just me?
body: <p>I have a basic layout with flexbox. </p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.grid {
      display: flex;
      flex-wrap: wrap;
  }
  .element-item {
      flex-direction: row;
      width: calc(100% / 2);
  }
  .element-item img {
      width: 100%;
      height: 16em;
      object-fit: cover;
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="grid"&gt;
      &lt;div class="element-item taxonomy"&gt;
          &lt;img class="attachment-post-thumbnail" src="image-1.jpg" alt="image-1" /&gt;
          &lt;h3&gt;Title&lt;/h3&gt;
          &lt;h5&gt;Taxonomy&lt;/h5&gt;
      &lt;/div&gt;
      ...
  &lt;/div&gt;
  </code></pre>
  
  <p>All good, the button filter navigation is working too. But when I init Isotope in my .js file, the whole layout collapses, the images disappear and everything is stacked on top of each other.</p>
  
  <p><strong>jQuery:</strong>:</p>
  
  <pre><code>// init Isotope
  var $grid = $('.grid').isotope({
      // options
      itemSelector: '.element-item',
  });
  
  // filter items on button click
  $('.filter-button-group').on( 'click', 'button', function() {
      var filterValue = $(this).attr('data-filter');
      $grid.isotope({ filter: filterValue });
  });
  </code></pre>
  
  <p>Doesn't Isotope "work" well with Flexbox? Or am I missing some Isotope jQuery option. Or haven't I been precise enough with the Flexbox properties?</p>
  
  <p>Thanks.</p>
  
  <p>jsfiddle by request <a href="https://jsfiddle.net/Lyqdguvz/" rel="nofollow">https://jsfiddle.net/Lyqdguvz/</a></p>