角度材料布局错误？卡片重叠

Question

我想使用material.angularjs.org中的响应layout来显示两个cards。

在“真实”网站上，这些卡片在小屏幕上重叠： [真实世界的例子不再存在]

但是，当我将完全相同的html / js代码复制/粘贴到stackoverflow片段中时，它可以正常工作！

大屏幕：工作正常：

小屏幕：卡片重叠！

为了更好地说明它是什么，我在下面的网站上插入了我在虚拟内容中使用的代码片段：

		(function(){
			'use strict';

			angular
				.module('BlankApp', ['ngMaterial'])
			;
      })();

	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">

<!-- Angular Material requires Angular.js Libraries -->
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>

	<!-- Angular Material Library -->
	<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>

<main ng-app="BlankApp" ng-cloak class="md-content">
  
<div layout="row" layout-xs="column">
  <div flex>
    <md-card>
      <img src="http://placehold.it/350x150" class="md-card-image" alt="Washed Out">
      <md-card-title>
        <md-card-title-text>
          <span class="md-headline">Action buttons</span>
        </md-card-title-text>
      </md-card-title>
      <md-card-content>
        <p>
          The titles of Washed Out's breakthrough song and the first single from Paracosm share the two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
        </p>
      </md-card-content>
      <md-card-actions layout="row" layout-align="end center">
        <md-button>Action 1</md-button>
        <md-button>Action 2</md-button>
      </md-card-actions>
    </md-card>
  </div>
  <div flex>
    <md-card>
      <img src="http://placehold.it/350x150" class="md-card-image" alt="Washed Out">
      <md-card-title>
        <md-card-title-text>
          <span class="md-headline">Action buttons</span>
        </md-card-title-text>
      </md-card-title>
      <md-card-content>
        <p>
          The titles of Washed Out's breakthrough song and the first single from Paracosm share the two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
        </p>
      </md-card-content>
      <md-card-actions layout="row" layout-align="end center">
        <md-button>Action 1</md-button>
        <md-button>Action 2</md-button>
      </md-card-actions>
    </md-card>
  </div>
</div>
  </main>

如何解决这种不需要的卡重叠？

Answer 1

以下适用于我。在CSS文件中，从angular-material.min.css覆盖此CSS行。

@media (max-width: 599px)
.layout-xs-column>.flex {
     min-height: 0;
}

使用：

@media (max-width: 599px)
.layout-xs-column>.flex {
     min-height: auto;
}

我没有使用material.angularjs.org的经验，但它可以像这样固定。