Html 向flexbox添加内容溢出的滚动条

我试图创建一个滚动的div，它包含在一个flex元素中，该元素被扩展以填充页面

在我的代码中，第2列将有很长的内容，因此我们需要为每一列设置单独的滚动条

这是我目前的结构：

html，
身体{
保证金：0；
填充：0；
边界：0；
身高：100%；
最小高度：100%；
}
BODY.screen-layout-BODY{
溢出：隐藏；
}
.flex.two-col-main-sidebar{
显示器：flex；
弯曲方向：行；
宽度：100%；
右边填充：0；
}
.flex.layout-content-default{
宽度：100.0%；
最小宽度：0；
最大宽度：无；
显示器：flex；
柔性流：柱包裹；
}
.布局内容默认值{
宽度：100.0%；
最小宽度：0；
最大宽度：无；
显示：块；
}
.内容{
空白：正常；
}
.内容项{
垂直对齐：顶部；
显示：块；
利润率：0.0px 0 14.0px 0px；
宽度：100.0%；
填充：0.0px 0.0px；
}
.two col主边栏>.column-1{
保证金：0；
浮动：左；
宽度：100%；
框大小：边框框；
位置：相对位置；
显示：块；
右边填充：0.0px；
}
.flex.two col主边栏>.column-1{
保证金：0；
左侧填充：0；
位置：静态；
浮动：无；
右边填充：0.0px；
弹性：10%；
}
.two col主边栏>.column-2{
利润率：0-100%0；
浮动：左；
框大小：边框框；
位置：相对位置；
显示：块；
宽度：300.0px；
}
.flex.two col主边栏>.column-2{
保证金：0；
位置：静态；
浮动：无；
flex:0300.0px；
}

标题
第1列将占屏幕的70%。我需要添加滚动条这个div将溢出的内容
第2列将占屏幕的30%

您的版本正在中断，因为您已将

列1

设置为

宽度：100%

您也可以在不使用所有嵌套选择器的情况下指定样式（使代码更易于维护）

html，
身体{
保证金：0；
填充：0；
边界：0；
身高：100%；
最小高度：100%；
}
.屏幕布局主体{
溢出：隐藏；
}
.flex{
显示器：flex；
弯曲方向：行；
宽度：100%；
右边填充：0；
}
.内容{
空白：正常；
}
.内容项{
垂直对齐：顶部；
显示：块；
利润率：0.14像素0；
填充：0；
}
.标题{
背景色：#444；
颜色：#fff；
宽度：100%；
填充：1em；
}
.第1栏{
宽度：70%；
高度：95vh；
溢出：自动；
框大小：边框框；
背景色：#eee；
}
.第2栏{
宽度：30；
高度：95vh；
溢出：自动；
背景色：#ccc；
框大小：边框框；
}

标题
第1列将占屏幕的70%。我需要添加滚动条这个div将溢出的内容。第1列将占屏幕的70%。我需要添加滚动条这个div将溢出的内容。第1列将占屏幕的70%。我需要添加滚动条这个div将溢出的内容。第1列将占屏幕的70%。我需要添加滚动条这个div将溢出的内容。第1列将占屏幕的70%。我需要添加滚动条这个div将溢出的内容。第1列将占屏幕的70%。我需要添加滚动条这个div将溢出的内容。第1列将占屏幕的70%。我需要添加滚动条这个div将溢出的内容。第1列将占屏幕的70%。我需要添加滚动条这个div将溢出的内容。第1列将占屏幕的70%。我需要添加滚动条这个div将溢出的内容。第1列将占屏幕的70%。我需要添加滚动条这个div将溢出的内容。第1列将占屏幕的70%。我需要添加滚动条这个div将溢出的内容。第1列将占屏幕的70%。我需要添加滚动条这个div将溢出的内容。第1列将占屏幕的70%。我需要添加滚动条这个div将溢出的内容。第1列将占屏幕的70%。我需要添加滚动条这个div将溢出的内容。第1列将占屏幕的70%。我需要添加滚动条这个div将溢出的内容。第1列将占屏幕的70%。我需要添加滚动条这个div将溢出的内容。
第2列将占屏幕的30%

您的代码所做的事情与您描述的非常不同，请在使用flexbox之前学习一些基本知识。