Card images overlapping each other

I am making an image gallery with Angular-Material. The problem is that my cards overlap each other when they're too tall. See this pen:

http://codepen.io/anon/pen/gMrmdR

I'm trying to get the cards to sit right under each other without overlapping. I've tried overflow:auto;, but that causes the images to be cut off from screen with a scrollbar. I want to show the entire image. Any CSS heroes out there that know what to do?

angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])

.controller('AppCtrl', function($scope) {
  $scope.imagePath = 'img/washedout.png';
  $scope.Images = [];

  for (var i = 0; i < 10; i++) {
    var s = Math.random() > 0.5 ?
      "http://placehold.it/350x800" :
      "http://placehold.it/800x200"
    $scope.Images.push({
      src: s,
      user: "cool user",
      address: "cool address",
      notes: "some notes",
      id: 1
    });
  }
});


/**
Copyright 2016 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at http://material.angularjs.org/license.
**/

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.js"></script>
<link href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.css" rel="stylesheet" />
<link href="https://material.angularjs.org/1.1.0-rc.5/docs.css" rel="stylesheet" />


<div ng-controller="AppCtrl" ng-cloak="" class="carddemoCardActionButtons" ng-app="MyApp">

  <md-grid-list flex ng-cloak md-cols-xs="1" md-cols-sm="2" md-cols-md="4" md-cols-gt-md="4" md-row-height-gt-md="1:1.13" md-row-height="2:2.5" md-gutter="12px" md-gutter-gt-sm="8px">
    <md-grid-tile ng-repeat="n in Images">

      <md-card class="galleryCard">
        <div class="galleryImage">
          <img ng-click="ShowDetails($event, n.id, $index)" ng-src="{{n.src}}" class="md-card-image galleryImage" alt="{{n.notes}}">
        </div>
        <md-card-content>
          <p>
            <span class="cardIcon">
                            <svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="#000000" d="M12 4C14.2091 4 16 5.79086 16 8C16 10.2091 14.2091 12 12 12C9.79086 12 8 10.2091 8 8C8 5.79086 9.79086 4 12 4ZM12 14C16.4183 14 20 15.7909 20 18L20 20L4 20L4 18C4 15.7909 7.58172 14 12 14Z"></path></svg>
                        </span>
            <span class="cardText">
                            {{n.user}}
                        </span>
          </p>
          <p>
            <span class="cardIcon">
                            <svg style="width:24px;height:24px" viewBox="0 0 24 24">
                                <path fill="#000000" d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z" />
                            </svg>
                        </span>
            <span class="cardText">
                            {{n.address}}
                        </span>
          </p>
          <p>
            <span class="cardIcon">
                            <svg style="width:24px;height:24px" viewBox="0 0 24 24">
                                <path fill="#000000" d="M14,10V4.5L19.5,10M5,3C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V9L15,3H5Z" />
                            </svg>
                        </span>
            <span class="cardText">
                            {{n.notes}}
                        </span>
          </p>
        </md-card-content>
        <md-card-actions layout="row" layout-align="end center">
          <md-button class="md-icon-button" aria-label="Favorite" ng-href="{{n.src}}" ng-click="" target="_blank">
            <svg style="width:24px;height:24px" viewBox="0 0 24 24">
              <path fill="#000000" d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
            </svg>
          </md-button>
          <md-button class="md-icon-button" aria-label="Settings" ng-click="ShowDetails($event, n.id, $index)">
            <svg style="width:24px;height:24px" viewBox="0 0 24 24">
              <path fill="#000000" d="M6.38,6H17.63L12,16L6.38,6M3,4L12,20L21,4H3Z" />
            </svg>
          </md-button>
        </md-card-actions>
      </md-card>
    </md-grid-tile>
  </md-grid-list>

</div>

<!--
Copyright 2016 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at http://material.angularjs.org/license.
-->

My desired result in image form: