角度材料のフレックスレイアウト - サイズ変更時に行の2番目のコンテナが移動しない

Question

角度のある材料レイアウトを使用しています。 2つのコンテナが並んでいて、ページのサイズを変更すると、最初のコンテナの下に2つ目のコンテナが移動することを期待しています。第2の容器は第1の容器の下を移動しない。

<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

フレックス40％は、容器の40％を占めることを意味します。コンテナのサイズには関係ありません。レスポンシブデザインが必要な場合は、フレックスの子に最小幅を設定できます。たとえば、あなたは1つが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>

を使用すると、ブラウザのサイズを変更することはできませんスニペット。

Answer 2

あなたの第二の容器はできませんので、フレックス= 40とあなたの第一の容器フレックス= 60、この合計= 100で移動し、それは100％です。 フレックスでは、2つのコンテナは常に同じ行にとどまります。