个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 14:45:03 25 4
gpt4 key购买 nike

我试图让一个滚动的 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>

关于html - 向内容溢出的 flexbox 添加滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52387847/

25 4 0
文章推荐： javascript - Angular 4 - Firebase - 检查用户是否已连接
文章推荐： javascript - 多个元素具有相同的类，仅获取单击元素的文本
文章推荐： javascript - 如何全局加载 quasar 框架
文章推荐： ios - ObjectMapper 数组错误
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com