css - Angular material flex layout - 行中的第二个容器在调整大小时不会移动

Question

我正在使用 Angular Material 布局。我在一行中有两个容器，当我调整页面大小时，我希望第二个容器移动到第一个容器下方。第二个容器不会在第一个容器下方移动。

<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>

Answer 1

Flex 40% 表示它占据容器的 40%。容器的大小无关紧要。如果您需要响应式设计，您可以设置最小宽度来 flex child 。例如，您希望一个宽度小于 400 像素:

div.row{
        display: flex;
        flex-wrap: wrap;
    }

    div.child{
       min-width: 201px; /* it is smaller than all mobiles. */
      height:100px;
      border: 1px solid black;
    }

<div class="row">
  
  <div class="child" style="flex:60;"></div>
  <div class="child" style="flex:40;"></div>
  <div>

在代码片段中，您无法更改浏览器大小。