Flex box expanding instead of scrolling

Question

I am trying to create data grid that will contain information in a box. The boxes wrap as expected; however, if thy wrap past the container - the container grows instead of scrolling. Please let me know how I can accomplish this.

CSS

body {
  height: 100%;
}

html {
  min-height: 100%;
}

.container {
  height: 300px;
}

.container-title,.container-footer {
  background-color: red;
  color: white;
}

.card-table-content {
  display: flex;
  flex-flow: row wrap;
  min-height: 0px;
  flex-grow: 1;  
  background: cadetblue;
  overflow-y:scroll;

}

.card-table-content>div {
  width: 25%;
  height: 100px;
  border: 1px solid green;
  margin: 10px;
  background:transparent;
}

HTML

body {
  height: 100%;
}

html {
  min-height: 100%;
}

.container {
  height: 300px;
}

.container-title,.container-footer {
  background-color: red;
  color: white;
}

.card-table-content {
  display: flex;
  flex-flow: row wrap;
  min-height: 0px;
  flex-grow: 1;  
  background: cadetblue;
  overflow-y:scroll;

}

.card-table-content>div {
  width: 25%;
  height: 100px;
  border: 1px solid green;
  margin: 10px;
  background:transparent;
}

<div class="container">  
  <div class="container-title"> Title should go here </div>
  <div class="card-table-content">  
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
  </div>
  <div class="container-footer">Footer Here</div>  
</div>