Css 角度材料柔性布局-行中的第二个容器不'；调整大小时不移动

我使用的是有角度的材质布局。这一行中有两个容器，当我调整页面大小时，我希望第二个容器移动到第一个容器下面。第二个容器不会在第一个容器下移动

<fieldset>
<legend>Test</legend>
<div layout="row" layout-xs="column">
    <div flex="60" style="height:900pt">
        <divng-show="testShow">
            <div id="overlayDiv"></div>
            <iframe class="iFrameClass"  ng-show="showIfSelected"></iframe>
        </div>
    </div>
    <div flex="40" style="height:900pt">
        <md-content>
            <md-table-container ng-show="showIfSelected">
                <table md-table>
                </table>
            </md-table-container>
        </md-content>
    </div>
</div>

试验

---

第二个容器不能移动，因为当flex=40，第一个容器flex=60时，这个总和=100，它是100%。

---

使用flex，您的两个容器将始终保持在同一行上

Flex 40%意味着它占据了容器的40%。容器的大小无关紧要。如果您需要响应性设计，您可以将最小宽度设置为flex children。例如，您希望其中一个位于另一个下方，宽度小于400px：

div.row{
显示器：flex；
柔性包装：包装；
}
分区儿童{
最小宽度：201px；/*比所有手机都小*/
高度：100px；
边框：1px纯黑；
}

如果没有CSS，上面的代码没有什么价值。A是必需的。代码使用的是角度材料框架，cssA演示仍然是必需的。我们无法访问“angular material framework css”…您可能无法修改它。