Question

我正在尝试使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中的任何一个添加更多类以使其正常工作。

Answer 1

您的版本已中断，因为您将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>

向内容丰富的Flexbox添加滚动条

1 个答案: