Make angular-material's md-cards not overlap
<p>At the first picture everything is ok.</p>

<p><a href="https://i.stack.imgur.com/Ylp1T.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ylp1T.png" alt="enter image description here"></a> </p>

<p>But if i make the width of my browser a little bigger, the result is the following:</p>

<p><a href="https://i.stack.imgur.com/S4k8X.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/S4k8X.jpg" alt="enter image description here"></a></p>

<p>Each md-card overlaps the next one and adds overflow-y. This issue is only on xs resolutions. Here is my html:</p>

<pre><code>&lt;div ng-view="" flex="" class="ng-scope flex"&gt;
    &lt;md-content layout-xs="column" layout="row" class="md-padding ng-scope layout-xs-column layout-row"&gt;
        &lt;div layout="column" layout-gt-xs="row" layout-wrap="" infinite-scroll="ctrl.nextArticles()" infinite-scroll-disabled="ctrl.isBusy || ctrl.isEnd" infinite-scroll-distance="1" class="layout-wrap ng-isolate-scope layout-gt-xs-row layout-column"&gt;
            &lt;!-- ngRepeat: article in ctrl.articles --&gt;
            &lt;div ng-repeat="article in ctrl.articles" class="post ng-scope flex-xs-100 flex-xl-20 flex-sm-50 flex-md-33 flex-lg-25" flex-xs="100" flex-sm="50" flex-md="33" flex-lg="25" flex-xl="20"&gt;
                &lt;md-card&gt;
                    &lt;md-card-header&gt;
                        &lt;md-card-avatar&gt;
                            &lt;img src="/images/sidenav-icons/Bomb.svg"&gt;
                        &lt;/md-card-avatar&gt;
                        &lt;md-card-header-text&gt;
                            &lt;span class="md-title ng-binding"&gt;FakeTitle147&lt;/span&gt;
                            &lt;span class="md-subhead ng-binding"&gt;FakeRubric3&lt;/span&gt;
                        &lt;/md-card-header-text&gt;
                    &lt;/md-card-header&gt;
                        &lt;img ng-src="/images/test-img.jpg" alt="*ALT*" class="md-card-image" src="/images/test-img.jpg"&gt;
                    &lt;md-card-title&gt;
                        &lt;md-card-title-text&gt;
                            &lt;span class="md-headline"&gt;Card header&lt;/span&gt;
                        &lt;/md-card-title-text&gt;
                    &lt;/md-card-title&gt;
                    &lt;md-card-content&gt;
                        &lt;p&gt;
                            The titles
                        &lt;/p&gt;
                    &lt;/md-card-content&gt;
                    &lt;button class="md-button md-ink-ripple" type="button" ng-transclude="" ng-click="ctrl.showArticle(article._id)" aria-label="Button"&gt;
                        &lt;span class="ng-scope"&gt;Button&lt;/span&gt;
                    &lt;/button&gt;
                &lt;/md-card&gt;
</code></pre>

<p>I have no custom css (only background-color). Thanks for your ideas.</p>