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

Question

我正在尝试使用 overflow-y: auto 创建一个响应式 3 列布局，这样如果内容变得太高，就会出现滚动条。问题是我需要所有 3 列来填充垂直空间并且永远不会缩小容器的 100% 高度。

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

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

标签： javascripthtmlcssflexboxless