我正在尝试有一个滚动的div，该div 包含在扩展以填充页面的 flex 元素中。
在我的代码中，column2 将具有冗长的内容，因此我们需要为每列提供单独的滚动。
这是我当前的结构：
html,
body {
margin: 0;
padding: 0;
border: 0;
height: 100%;
min-height: 100%;
}
BODY.screen-layout-body {
overflow: hidden;
}
.flex.two-col-main-sidebar {
display: flex;
flex-direction: row;
width: 100%;
padding-right: 0;
}
.flex.layout-content-default {
width: 100.0%;
min-width: 0;
max-width: none;
display: flex;
flex-flow: column wrap;
}
.layout-content-default {
width: 100.0%;
min-width: 0;
max-width: none;
display: block;
}
.content {
white-space: normal;
}
.content-item {
vertical-align: top;
display: block;
margin: 0.0px 0 14.0px 0px;
width: 100.0%;
padding: 0 0.0px 0 0.0px;
}
.two-col-main-sidebar>.column-1 {
margin: 0;
float: left;
width: 100%;
box-sizing: border-box;
position: relative;
display: block;
padding-right: 0.0px;
}
.flex.two-col-main-sidebar>.column-1 {
margin: 0;
padding-left: 0;
position: static;
float: none;
padding-right: 0.0px;
flex: 1 1 0%;
}
.two-col-main-sidebar>.column-2 {
margin: 0 -100% 0 0;
float: left;
box-sizing: border-box;
position: relative;
display: block;
width: 300.0px;
}
.flex.two-col-main-sidebar>.column-2 {
margin: 0;
position: static;
float: none;
flex: 0 0 300.0px;
}<html>
<body class="screen-layout-body with-fixed-header">
<div class="header">Header</div>
<div class=" flex content layout-content-default two-col-main-sidebar">
<div class="content-item content-layout column-1">Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content</div>
<div class="content-item content-layout column-2">Column2 which will be 30% of screen</div>
</div>
</body>
<html>注意：无论这里的CSS类是什么，由工具生成，我们都无法修改它们，此外，我们可以向任何div添加更多类以使其工作。
您的版本正在中断，因为您已将column-1设置为width: 100%。
您也可以指定没有所有嵌套选择器的样式(使代码更易于维护(。
html,
body {
margin: 0;
padding: 0;
border: 0;
height: 100%;
min-height: 100%;
}
.screen-layout-body {
overflow: hidden;
}
.flex {
display: flex;
flex-direction: row;
width: 100%;
padding-right: 0;
}
.content {
white-space: normal;
}
.content-item {
vertical-align: top;
display: block;
margin: 0 0 14px 0;
padding: 0;
}
.header {
background-color: #444;
color: #fff;
width: 100%;
padding: 1em;
}
.column-1 {
width: 70%;
height: 95vh;
overflow: auto;
box-sizing: border-box;
background-color: #eee;
}
.column-2 {
width: 30;
height: 95vh;
overflow: auto;
background-color: #ccc;
box-sizing: border-box;
}<html>
<body class="screen-layout-body with-fixed-header">
<div class="header">Header</div>
<div class=" flex content layout-content-default two-col-main-sidebar">
<div class="content-item content-layout column-1">Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content.</div>
<div class="content-item content-layout column-2">Column2 which will be 30% of screen</div>
</div>
</body>
<html>