角度材料设计在某些移动浏览器上表现得很奇怪

Question

我有以下Angular-MD代码。我希望div在桌面上和移动设备的列视图中连续弯曲。这适用于某些移动浏览器（标准浏览器和我测试的Safari）。列高是大而不适应内容的方式。看起来它们都是最大的内容，即使内容较少，也可以保存内容。

<section class="md-whiteframe-z0 sect" flex="50" flex-sm="90" flex-md="80">
    <md-toolbar class="tool2" layout-padding>
        <div class="md-toolbar-tools">
          <h4>
            <!-- Toolbar text -->
          </h4>
        </div>
    </md-toolbar>

<md-content class="md-default-theme" layout-padding layout="row" layout-sm="column" layout-wrap>
    <div flex="40" flex-sm="100" layout-align="center start" layout="row">
            <!-- This should be next to eachother on desktop and under eachother on mobile -->
    <div flex="20" flex-sm="100" layout-align="start center" layout-align-sm="center center" layout="column">
        <!-- This should be next to eachother on desktop and under eachother on mobile -->
    </div>
    <div flex="40" flex-sm="100" layout-align="center start" layout="row">
        <!-- This should be next to eachother on desktop and under eachother on mobile -->
    </div>
</md-content>