Html 将滚动条添加到flexbox内的div

我试图创建一个滚动的div，它包含在一个flex元素中，该元素被扩展以填充页面。目前，它只是溢出了它的容器

我看了一些问题，比如：运气不好

在我的代码中，应该滚动并包含到lightblue div中的蓝色内容div溢出并溢出

这是我目前的结构：

.base{
背景：浅蓝色；
显示器：flex；
柔性流动：柱；
高度：100vh；
填充：0 20px；
}
.栏目{
显示器：flex；
柔性流动：柱；
弹性：10自动；
背景：浅绿色；
/*溢出：隐藏*/
}
.说明{
背景：红色；
显示器：flex；
柔性流动：柱；
}
.标题{
背景：水鸭；
}
.内容{
背景：蓝色；
溢出：滚动；
}

这是标题
这就是内容

这是很多内容

这就是内容

这是很多内容

这就是内容

这是很多内容

这就是内容

这是很多内容

这就是内容

这是很多内容

这就是内容

这是很多内容

这就是内容

这是很多内容

这就是内容

这是很多内容

这就是内容

这是很多内容

这就是内容

这是很多内容

这就是内容

这是很多内容

这就是内容

这是很多内容

这就是内容

这是很多内容

这就是内容

这是很多内容

这就是内容

这是很多内容

这就是内容

这是很多内容

这就是内容

这是很多内容

请参见下面的代码，在IE 11和Chrome中测试

.base{
显示：-webkit flex；/*Safari*/
显示器：flex；
背景：浅蓝色；
填充：0 20px；
高度：100vh；
}
.栏目{
显示：-webkit flex；/*Safari*/
显示器：flex；
背景：浅绿色；
柔性流动：柱；
弹性：10自动；
}
.说明{
背景：红色；
显示：-webkit flex；/*Safari*/
显示器：flex；
柔性流动：柱；
弹性：1；
}
.标题{
背景：水鸭；
}
.内容{
-webkit-flex:1；
-ms-flex:1；
背景：蓝色；
溢出y：滚动；
柔性流动：柱；
}

这是标题
这就是内容

这是很多内容

这就是内容

这是很多内容

这就是内容

这是很多内容

这就是内容

这是很多内容

这就是内容

这是很多内容

这就是内容

这是很多内容

这就是内容

这是很多内容

这就是内容

这是很多内容

这就是内容

这是很多内容

这就是内容

这是很多内容

这就是内容

这是很多内容

这就是内容

这是很多内容

这就是内容

这是很多内容

这就是内容

这是很多内容

这就是内容

这是很多内容

这就是内容

这是很多内容

这就是内容

这是很多内容

再举一个例子

html，
身体{
身高：100%；
}
#包装纸{
身高：100%；
显示：表格；
宽度：700px；
}
#标题{
显示：表格行；
高度：30px；
}
#右柱{
显示：内联块；
宽度：320px；
身高：100%；
最大高度：100%；
右边距：20px；
边框：2个黑色实心；
垂直对齐：顶部；
溢出：隐藏；
}
#内右翼{
高度：300px；
最大高度：300px；
溢出y：滚动；
背景：象牙；
}

标题
标题

附件1

附件2

附件3

附件4

附件5

附件6

附件7

附件8附件1

附件2

附件3

附件4

附件5

附件6

附件7

附件8附件5

附件6

附件7

附件8

它也不在原始代码中，应该添加

显示：-moz-flex用于firefox。