md-card growing bigger than the screen - layout

Question

I hope someone can help me with this piece of code that I have been struggling with for the last couple of hours. I have a grid of cards with a somewhat responsive design. see this pen.My problem is that I do not understand why the 3rd and 4th cards don't fit the screen like the rest of them and instead their width gets increased a lot more than needed.
Just a heads up, I cannot use md-grid so if you can point me to what's wrong with the current code or element distribution I will really appreciate it.
<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>