AngularJS材质卡与flex布局重叠

我有一个页面，上面有一些AngularJS材料卡片，需要分两列排列。最后一张卡片应在两列下方显示全宽。但是，卡3和卡4（取决于宽度）与最后一张卡重叠。我花了几个小时调试这个，但就是不知道为什么会发生这种情况

这是我的密码：

angular.module（'app'，['ngMaterial']）.controller（'ctrl'，function（）{}）

左卡#1
一些内容

一些内容

一些内容

一些内容

一些内容

一些内容

左卡#2
一些内容

一些内容

一些内容

一些内容

一些内容

一些内容

左卡#3
一些内容

一些内容

一些内容

一些内容

一些内容

一些内容

左卡#4
一些内容

一些内容

一些内容

一些内容

一些内容

一些内容

牌权
一些内容

一些内容

一些内容

一些内容

一些内容

一些内容

下面的卡片
这应该比其他一切都重要

布肯
我已经为代码段创建了codepen，即使宽度更改为任何值，它似乎也能正常工作

这可能是一个浏览器问题，看起来不像是一个角度材质错误


angular.module（'app'，['ngMaterial']）.controller（'ctrl'，function（）{}）

左卡#1
一些内容

一些内容

一些内容

一些内容

一些内容

一些内容

左卡#2
一些内容

一些内容

一些内容

一些内容

一些内容

一些内容

左卡#3
一些内容

一些内容

一些内容

一些内容

一些内容

一些内容

左卡#4
一些内容

一些内容

一些内容

一些内容

一些内容

一些内容

牌权
一些内容

一些内容

一些内容

一些内容

一些内容

一些内容

C