具有最小宽度的响应式mdl-cards分布奇怪

Question

屏幕截图：

PHP / HTML

   

<?php do_action('woocommerce_before_shop_loop_item'); ?>

<a href="<?php the_permalink(); ?>">

    <?php do_action('woocommerce_before_shop_loop_item_title'); ?>

    <div class="mdl-card__title mdl-card--expand">
        <h3 class="mdl-card__title-text">

            <?php do_action('woocommerce_shop_loop_item_title'); ?>

        </h3>

    </div>
    <div class="mdl-card__supporting-text product-card-supporting-text">

        <?php do_action('woocommerce_after_shop_loop_item_title'); ?>

    </div>
    <div class="mdl-card__actions mdl-card--border">
        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect product-card-button-left">
            Get a Quote
        </a>
        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect product-card-button-right">
            Add to Cart
        </a>
    </div>
</a>

<?php do_action('woocommerce_after_shop_loop_item'); ?>

CSS

.mx-product-card {
  width: 270px;
  min-width: 270px;
  height: 480px;
}

没有最小宽度它工作正常，并且mdl-cards正确分发。 但随后mdl-cards变得非常纤薄，在某些设备上看起来很奇怪。

屏幕截图：

如何才能使其正常工作？ 我希望mdl-cards能够分发，以便所有行总是平均填充，并且mdl-cards不会被缩小和挤压。