Html 无固定高度的带卷轴的柔性容器

我有一个容器，必须和窗户一样高。里面有一些元素（黄色、石灰和红色）。红色容器有一个标题（绿色）和一个包含较小元素的蓝色容器。这个蓝色的容器应该有滚动条。所有元素都不应超过窗口高度（因此窗口本身上没有滚动条）。我希望我说得够清楚，能理解

.blue{
  flex:1 1;
  overflow:auto;
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(155px,1fr));
  grid-column-gap: 1.25rem;
  grid-row-gap: 1.25rem;
  padding:10px;
  background:blue;
}
.blue .item{
    transition: background .2s,box-shadow .3s;
    -moz-user-select: none;
    height: 175px;
    text-align: center;
    border-radius: 5px;
    background: #1C2127;
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    align-items: center;
    user-select: none;
}

如何使蓝色容器用flex填充剩余空间，并在其中包含一个滚动条

我试图解决这个问题，但似乎不起作用。我为这个问题做了一个密码笔：

---

谢谢

添加了

flex-basis:0

样式

html，正文{
身高：100%；
保证金：0
}
.集装箱{
身高：100%；
背景颜色：灰色；
宽度：500px；/*出于演示目的，我已将“800px”更改为“500px”*/
显示器：flex；
弯曲方向：立柱；
}
黄先生{
背景：黄色；
高度：80px；
}
莱姆先生{
背景：石灰；
高度：80px；
}
瑞德先生{
背景：红色；
弹性：1；
显示器：flex；
弯曲方向：立柱；
}
格林先生{
弹性：0；
背景：绿色；
填充：10px；
文本对齐：居中；
}
蓝先生{
flex:1；/*您也可以在此处添加'0'*/
flex-basis:0；/*您还可以在缩写“flex”后添加“0”，flex:1,1,0*/
最小高度：50px；/*出于演示目的，我添加了“最小高度：50px”样式*/
溢出：自动；
显示：网格；
网格模板列：重复（自动填充，最小值（155px，1fr））；
栅柱间隙：1.25rem；
网格行间距：1.25rem；
填充：10px；
背景：蓝色；
}
.蓝色.项目{
过渡：背景.2s，方框阴影.3s；
-moz用户选择：无；
高度：175px；
文本对齐：居中；
边界半径：5px；
背景：#1C2127；
位置：相对位置；
光标：指针；
显示器：flex；
弯曲方向：立柱；
溢出：隐藏；
对齐项目：居中；
用户选择：无；
}

黄色的
石灰
这里有一些文字

添加了

弹性基础：0

样式

html，正文{
身高：100%；
保证金：0
}
.集装箱{
身高：100%；
背景颜色：灰色；
宽度：500px；/*出于演示目的，我已将“800px”更改为“500px”*/
显示器：flex；
弯曲方向：立柱；
}
黄先生{
背景：黄色；
高度：80px；
}
莱姆先生{
背景：石灰；
高度：80px；
}
瑞德先生{
背景：红色；
弹性：1；
显示器：flex；
弯曲方向：立柱；
}
格林先生{
弹性：0；
背景：绿色；
填充：10px；
文本对齐：居中；
}
蓝先生{
flex:1；/*您也可以在此处添加'0'*/
flex-basis:0；/*您还可以在缩写“flex”后添加“0”，flex:1,1,0*/
最小高度：50px；/*出于演示目的，我添加了“最小高度：50px”样式*/
溢出：自动；
显示：网格；
网格模板列：重复（自动填充，最小值（155px，1fr））；
栅柱间隙：1.25rem；
网格行间距：1.25rem；
填充：10px；
背景：蓝色；
}
.蓝色.项目{
过渡：背景.2s，方框阴影.3s；
-moz用户选择：无；
高度：175px；
文本对齐：居中；
边界半径：5px；
背景：#1C2127；
位置：相对位置；
光标：指针；
显示器：flex；
弯曲方向：立柱；
溢出：隐藏；
对齐项目：居中；
用户选择：无；
}

黄色的
石灰
这里有一些文字

flex:1 0.blue

上的code>这意味着蓝色div将首先被拉伸以填充空白，然后它的内容将被布局，这确保蓝色div保持在其父分区内。

flex:1 0.blue

上的code>这意味着蓝色div将首先被拉伸以填充空白，然后其内容将被布局，这将确保蓝色div保持在其父分区内。