How did I break scrolling in my Ionic layout?

I am trying to use Ionic Framework to make a screen with a fixed header & footer, then two columns inside. The left column will be a very basic menu with six .items arranged vertically. I'd like for this column to cover the full remaining height of the screen, so I set the height of each item to 17%. The right column is a much longer list, that should be able to scroll vertically (without affecting the position of the header, footer, or left column).

I started with Ionic's sidemenu starter app and modified it until I had the code below in menu.html. Between the HTML below and my CSS, I have the layout looking how I want it, but when I run the app in a browser, the right column will not scroll. The overflow is simply hidden.

Am I missing some Ionic trick here? Is there an existing layout that I should be using instead? When I add overflow-y:scroll to .col-75, scrollbars appear that I am able to use, but it's not clear to me if that will translate to a normal drag behavior on a mobile device.

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu id="menu" side="left" width="{{window_width}}">
    <ion-header-bar class="bar-stable">
      <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Legco.svg/170px-Legco.svg.png"/>
      <h1 class="title">My App</h1>
      <div class="buttons">
        <a href="#/notifications">
          <i class="ion-icon ion-chatbubble dark"></i>
        </a>
        <a href="#/notifications">
          <i class="ion-icon ion-search dark"></i>
        </a>
        <a href="#/notifications">
          <i class="ion-icon ion-android-more-vertical dark"></i>
        </a>
      </div>
    </ion-header-bar>
    <div class="row has-header has-footer">
      <div class="col col-25 list">
        <ion-item menu-close href="#/app/pagea">Page A</ion-item>
        <ion-item menu-close href="#/app/pageb">Page B</ion-item>
        <ion-item menu-close href="#/app/pagec">Page C</ion-item>
        <ion-item menu-close href="#/app/paged">Page D</ion-item>
        <ion-item menu-close href="#/app/pagee">Page E</ion-item>
        <ion-item menu-close href="#/app/pagef">Page F</ion-item>
      </div> <!-- .col .list -->
      <div class="col col-75 list">
        <div class="item item-header">List That Should Scroll</div>
        <div class="item item-divider">Divider</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item item-divider">Divider</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item item-divider">Divider</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
      </div> <!-- .col .list -->
    </div> <!-- .row -->
    <div class="tabs button-bar">
      <a class="button">First</a>
      <a class="button">Second</a>
      <a class="button">Third</a>
    </div>
  </ion-side-menu>
</ion-side-menus>