css不出现滚动条

这是现在的样式,左边有滚动条,右边没有

css 复制代码
/* styles.css */
.guRpLZ {
  display: flex;
  flex-direction: column;
}
.dMItjA {
  height: 63px;
  border-bottom: 1px solid var(--TY-Line-1);
  background-color: rgb(251, 251, 253);
}
.gIoENS {
  flex: 1 0 0%;
  display: flex;
  background-color: #f7f8fc;
  overflow: hidden;
}
.bXUKwe {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
}
.kShHHP {
  min-width: 560px;
  height: 100%;
  flex: 1 1 0%;
  position: relative;
  background-color: #f7f8fc;
}
.docContent {
  width: 100%;
  height: calc(100vh - 64px);
  background-color: #f7f8fc;
}

这是代码,大概都是flex布局加上overflow:srcoll或者hidden,但是右边没有滚动条 ,排查后发现下面这个样式设置了flex布局但是没有高度导致的

修改后加上height就出现滚动条了

总结:如果在flex布局中,希望出现滚动条,保证父元素以及祖先元素要有高度 ,要么有具体的px或者100%

相关推荐
江城开朗的豌豆3 分钟前
Vue路由传参避坑指南:params和query的那些猫腻
前端·javascript·vue.js
十里青山11 分钟前
超好用的vue图片预览插件更新啦,hevue-img-preview 7.0.0版本正式发布,支持vue2/vue3/移动/pc,增加缩略图、下载、自定义样式等
前端·javascript·vue.js
lichenyang45320 分钟前
css模块化以及rem布局
前端·javascript·css
小熊哥^--^21 分钟前
条件渲染 v-show与v-if
前端
棉花糖超人29 分钟前
【从0-1的CSS】第3篇:盒子模型与弹性布局
前端·css·html
小小小小宇8 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊8 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习9 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖9 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖9 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web