md-card比屏幕增长更大

Question

我希望有人可以帮助我处理我在过去几个小时里一直在努力解决的这段代码。我有一个卡片网格，设计有点响应。 see this pen。我的问题是我不明白为什么第3张和第4张牌不像其他牌那样适合屏幕，而是他们的宽度比需要的增加了很多。 只是抬头，我不能使用md-grid，所以如果你能指出我当前的代码或元素分布有什么问题，我会非常感激。

<div ng-controller="MainCtrl" ng-cloak layout flex>
<!-- Some side content -->
<div id="sideContent" hide-xs flex-sm="33" flex-md="30" flex-lg="25" layout="column" class="md-whiteframe-z2" style="z-index: 55">
  <p>Some side content</p>
  <p>Lorem ipsum dolor sit amet, affert melius disputando ex his. Sit an unum disputando ullamcorper, his ne summo nostrud graecis. At modus nulla vidisse nam, pro et alienum iudicabit repudiandae, mei te dictas dignissim reprehendunt. Vivendum gloriatur
    adversarium te nec, liber apeirian tractatos ad pri, choro latine voluptatibus eu est. Ne maluisset liberavisse eos, et luptatum referrentur per.</p>
  <p>Lorem ipsum dolor sit amet, affert melius disputando ex his. Sit an unum disputando ullamcorper, his ne summo nostrud graecis. At modus nulla vidisse nam, pro et alienum iudicabit repudiandae, mei te dictas dignissim reprehendunt. Vivendum gloriatur
    adversarium te nec, liber apeirian tractatos ad pri, choro latine voluptatibus eu est. Ne maluisset liberavisse eos, et luptatum referrentur per.</p>
  <p>Lorem ipsum dolor sit amet, affert melius disputando ex his. Sit an unum disputando ullamcorper, his ne summo nostrud graecis. At modus nulla vidisse nam, pro et alienum iudicabit repudiandae, mei te dictas dignissim reprehendunt. Vivendum gloriatur
    adversarium te nec, liber apeirian tractatos ad pri, choro latine voluptatibus eu est. Ne maluisset liberavisse eos, et luptatum referrentur per.</p>
</div>
<md-content style="z-index: 54; position: relative;" flex>

  <div layout layout-wrap>

    <!-- Custom sized card -->
    <div layout flex="35" flex-md="100" flex-xs="100" flex-sm="100">
      <md-card flex="noshrink" style="width:300px;height:700px;">
        <md-toolbar class="md-hue-2">
          <div class="md-toolbar-tools">
            <h3><span>Card 1</span></h3>
          </div>
        </md-toolbar>
        <md-card-content layout="column" layout-padding>Content in card 1</md-card-content>
        <span flex></span>
        <md-card-icon-actions layout>
          <span flex></span>
          <md-button aria-label="details">
            <span>Details</span>
          </md-button>
        </md-card-icon-actions>
      </md-card>
    </div>

    <div layout flex flex-md="100" flex-xs="100" flex-sm="100">

      <div layout layout-wrap flex>
        <!-- Card 2 -->
        <md-card flex="noshrink" style="min-width:300px;">
          <md-toolbar class="md-hue-2">
            <div class="md-toolbar-tools">
              <h3><span>Card 2</span></h3>
            </div>
          </md-toolbar>
          <md-card-content layout="column" layout-padding>
            Content in card 2
            <md-select placeholder="{{data.currentSelected}}" ng-model="selection">
              <md-option ng-value="$index" ng-repeat="text in data.options">{{text.text}}</md-option>
            </md-select>
            <span>Some random text<br />
More random text, with some more text</span>
          </md-card-content>
          <span flex></span>
          <md-card-icon-actions layout>
            <span flex></span>
            <md-button aria-label="details">
              <span>Details</span>
            </md-button>
          </md-card-icon-actions>
        </md-card>
        <!-- tabs -->
        <md-card flex="noshrink" style="min-width:300px;">
          <md-toolbar class="md-hue-2">
            <div class="md-toolbar-tools">
              <h3><span>Card 3</span></h3>
            </div>
          </md-toolbar>
          <md-card-content layout="column" layout-padding>
            <md-tabs md-selected="1" md-center-tabs flex>
              <md-tab ng-repeat="tab in data.tabs">
                <md-tab-label>{{tab.name}}</md-tab-label>
                <md-tab-body>
                  <div style="padding-top:20px;">
                    <md-list-item class="md-2-line" ng-repeat="content in tab.content">
                      <img ng-attr-src="http://placehold.it/{{::content.image}}" class="md-avatar" />
                      <div class="md-list-item-text" layout="column">
                        <h3>{{::content.title}}</h3>
                        <p>{{::content.data}}</p>
                      </div>
                      <md-icon class="material-icons">
                        cached
                        <md-tooltip>Icon 1</md-tooltip>
                      </md-icon>
                      <span style="margin-left:5px;"></span>
                      <md-icon class="material-icons">
                        cached
                        <md-tooltip>Icon 2</md-tooltip>
                      </md-icon>
                    </md-list-item>
                  </div>
                </md-tab-body>
              </md-tab>
            </md-tabs>
          </md-card-content>
          <span flex></span>
          <md-card-icon-actions layout>
            <span flex></span>
            <md-button aria-label="details">
              <span>Details</span>
            </md-button>
          </md-card-icon-actions>
        </md-card>
      </div>
    </div>
  </div>
  <!-- Lorem -->
  <div layout flex>
    <div layout flex>
      <md-card flex="noshrink" style="min-width:300px;">
        <md-toolbar class="md-hue-2">
          <div class="md-toolbar-tools">
            <h3><span>Card 4</span></h3>
          </div>
        </md-toolbar>
        <md-card-content layout="column" layout-padding>{{::data.lorem}}</md-card-content>
        <span flex></span>
        <md-card-icon-actions layout>
          <span flex></span>
          <md-button aria-label="details">
            <span>Details</span>
          </md-button>
        </md-card-icon-actions>
      </md-card>
    </div>
  </div>
  <div layout layout-wrap>

    <!-- Card 5 -->
    <div layout flex>
      <md-card flex="noshrink" style="width:300px;">
        <md-toolbar class="md-hue-2">
          <div class="md-toolbar-tools">
            <h3><span>Card 5</span></h3>
          </div>
        </md-toolbar>
        <md-card-content layout="column" layout-padding>
          <div ng-repeat="content in data.content">{{::content}}</div>
        </md-card-content>
        <span flex></span>
        <md-card-icon-actions layout>
          <span flex></span>
          <md-button aria-label="details">
            <span>Details</span>
          </md-button>
        </md-card-icon-actions>
      </md-card>
    </div>
    <div layout flex></div>
    <!-- Card 6 -->
    <div layout flex>
      <md-card flex="noshrink" style="width:300px;">
        <md-toolbar class="md-hue-2">
          <div class="md-toolbar-tools">
            <h3><span>Card 6</span></h3>
          </div>
        </md-toolbar>
        <md-card-content layout="column" layout-padding>
          <md-subheader class="md-no-sticky">Some addresses {{::data.addresses.expiry_date}}</md-subheader>
          <md-list-item class="md-3-line" ng-repeat="address in data.addresses.address">
            <md-button class="md-icon-button" href="http://maps.google.com/maps?q=255 Queens Avenue London ON Canada" target="_blank" md-autofocus>
              <md-icon class="material-icons">place</md-icon>
              <md-tooltip>Open address in Google map</md-tooltip>
            </md-button>
            <div class="md-list-item-text" layout="column">
              <h3>{{::address.description}}</h3>
              <p>{{::address.street}}</p>
              <p>{{::address.city}}, {{::address.postal_code}}</p>
            </div>
          </md-list-item>
        </md-card-content>
        <span flex></span>
        <md-card-icon-actions layout>
          <span flex></span>
          <md-button aria-label="details">
            <span>Details</span>
          </md-button>
        </md-card-icon-actions>
      </md-card>
    </div>
  </div>
</md-content>
</div>