使角度材料的md卡不重叠

Question

第一张照片一切正常。

但如果我将浏览器的宽度放大一点，结果如下：

每个md-card重叠下一个并添加overflow-y。此问题仅适用于xs解决方案。这是我的HTML：

<div ng-view="" flex="" class="ng-scope flex">
    <md-content layout-xs="column" layout="row" class="md-padding ng-scope layout-xs-column layout-row">
        <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">
            <!-- ngRepeat: article in ctrl.articles -->
            <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">
                <md-card>
                    <md-card-header>
                        <md-card-avatar>
                            <img src="/images/sidenav-icons/Bomb.svg">
                        </md-card-avatar>
                        <md-card-header-text>
                            <span class="md-title ng-binding">FakeTitle147</span>
                            <span class="md-subhead ng-binding">FakeRubric3</span>
                        </md-card-header-text>
                    </md-card-header>
                        <img ng-src="/images/test-img.jpg" alt="*ALT*" class="md-card-image" src="/images/test-img.jpg">
                    <md-card-title>
                        <md-card-title-text>
                            <span class="md-headline">Card header</span>
                        </md-card-title-text>
                    </md-card-title>
                    <md-card-content>
                        <p>
                            The titles
                        </p>
                    </md-card-content>
                    <button class="md-button md-ink-ripple" type="button" ng-transclude="" ng-click="ctrl.showArticle(article._id)" aria-label="Button">
                        <span class="ng-scope">Button</span>
                    </button>
                </md-card>

我没有自定义css（只有背景色）。谢谢你的想法。

Answer 1

问题出在layout="column"。我刚刚取代了这个：

<div layout="column" layout-gt-xs="row" layout-wrap="" ...

到此：

<div layout="row" layout-wrap="" ...

这个解决方案对我来说没问题。