Угловой гибкий макет материала - второй контейнер в ряду не перемещается при изменении размера

Question

Я использую угловую компоновку материала. У меня есть два контейнера в строке, и я ожидаю, что второй переместится под первым, когда я изменю размер страницы. Второй контейнер не перемещается под первым.

<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% контейнера. Не имеет значения размер контейнера. Если вам нужен отзывчивый дизайн, вы можете установить минимальную ширину для гибких детей. Например, вы хотите один идет под другой по ширине меньше 400px:

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>

В фрагменте кода вы не можете изменить размер окна браузера.

Answer 2

Ваш второй контейнер не может, потому что движется со шлейфом = 40 и первого контейнера прогибается = 60, эта сумма = 100 и это 100%. С помощью flex ваш два контейнера всегда будут находиться в одном ряду.