容器上具有自动垂直滚动条的Flexbox列不会将整个屏幕填充到100％

Question

我正在尝试使用overflow-y：auto创建响应式3列布局，以便在内容过高时会出现滚动条。问题是我需要所有3列填充垂直空间，并且永远不会收缩通过容器的100％高度。

＆＃13;

＆＃13;

.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%;
    }
  }
}

＆＃13;

＆＃13;

＆＃13;

在这里演示：https://jsbin.com/sihabomuna 在全屏幕中它看起来很完美，3列填满了屏幕。缩小屏幕高度时会出现问题，因此div的内容大于容器。我需要让蓝色/红色/绿色div到达可滚动区域的底部。