角材 - IE 11のMDカードのレイアウトがオーバーフローする

Question

3つのMDカードをデスクトップデバイスに水平に積み重ね、小型デバイスに縦に（100％）積み重ねました。

<md-content class="cream" layout="row" layout-xs="column" layout-sm="column" > 
         <md-card flex="33" class="cream card-flex-auto" flex-sm="100" flex-xs="100" flex> 
          <md-card-content layout-padding class="cream"> 
           <fieldset class="demo-fieldset"> 
            <h3 class="remove-top-margin"><span class="red">*</span>Region</h3> 
            <div layout="row" layout-wrap flex> 
             <div flex="100"> 
              <md-checkbox aria-label="Select All" ng-checked="isRegionChecked()" md-indeterminate="isRegionIndeterminate()" ng-click="toggleRegionAll()"> <span ng-if="isRegionChecked()">Un-</span>Select All </md-checkbox> 
             </div> 
             <div class="demo-select-all-checkboxes" flex="100" ng-repeat="item in region"> 
              <md-checkbox ng-checked="exists(item, regionSelected)" ng-click="toggle(item, regionSelected)"> {{ item }} </md-checkbox> 
             </div> 
            </div> 
           </fieldset> 
          </md-card-content> 
         </md-card> 
         <md-card flex="33" class="cream" flex-sm="100" flex-xs="100" flex> 
          <md-card-content layout-padding class="cream card-flex-auto" > 
           <fieldset class="demo-fieldset"> 
            <h3 class="remove-top-margin">Line of Business</h3> 
            <div layout="row" layout-wrap flex> 
             <div flex="100"> 
              <md-checkbox aria-label="Select All" ng-checked="isLobChecked()" md-indeterminate="isLobIndeterminate()" ng-click="toggleLobAll()"> <span ng-if="isLobChecked()">Un-</span>Select All </md-checkbox> 
             </div> 
             <div class="demo-select-all-checkboxes" flex="100" ng-repeat="item in lineofbusiness"> 
              <md-checkbox ng-checked="exists(item, lobSelected)" ng-click="toggle(item, lobSelected)"> {{ item }} </md-checkbox> 
             </div> 
            </div> 
           </fieldset> 
          </md-card-content> 
         </md-card> 
         <md-card flex="33" class="cream" flex-sm="100" flex-xs="100" flex> 
          <md-card-content layout-padding class="cream card-flex-auto"> 
           <fieldset class="demo-fieldset"> 
            <h3 class="remove-top-margin">Segment</h3> 
            <div layout="row" layout-wrap flex> 
             <div flex="100"> 
              <md-checkbox aria-label="Select All" ng-checked="isSegmentChecked()" md-indeterminate="isSegmentIndeterminate()" ng-click="toggleSegmentAll()"> <span ng-if="isSegmentChecked()">Un-</span>Select All </md-checkbox> 
             </div> 
             <div class="demo-select-all-checkboxes" flex="100" ng-repeat="item in segment"> 
              <md-checkbox ng-checked="exists(item, segmentSelected)" ng-click="toggle(item, segmentSelected)"> {{ item }} </md-checkbox> 
             </div> 
            </div> 
           </fieldset> 
          </md-card-content> 

IE 11では、mdカードのレイアウトがデスクトップで親コンテナをオーバーフローし、ブラウザのサイズが変更されたときにオーバーフローします。

任意の提案/洞察力は本当に参考になります。

Answer 1

mdカードのレイアウトには最小「最小高さ：1px;」が必要です。 IE 11で正常に動作するようにします。