Flexbox columns with auto vertical scrollbar on container does not fill entire screen to 100%

Question

I am trying to create a responsive 3 column layout with overflow-y: auto so that if the content gets too high a scrollbar will appear. Problem is that i need all 3 columns to fill the vertical space and never shrink passed 100% height of the container.

.main{
  min-height: 100%;
  max-height: 100%;
  display: flex;
  flex-diretion: column;
  .container {
    overflow: auto;
    display: flex;
    flex-direction: row;
    flex: 1;
    > div{
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 100%;
    }
  }
}

Demo here: https://jsbin.com/sihabomuna In full screen it looks perfect, 3 columns fill up the screen. Problem occurs when you shrink the screen height so the content of the div is greater than the container. I need to get the blue/red/green divs to hit the bottom of the scrollable area.