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%

相关推荐
JosieBook31 分钟前
【web应用】如何进行前后端调试Debug? + 前端JavaScript调试Debug?
前端·chrome·debug
LBJ辉32 分钟前
2. Webpack 高级配置
前端·javascript·webpack
灵感__idea7 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴8 小时前
Mix
前端·webgl
代码续发8 小时前
前端组件梳理
前端
试图让你心动9 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码9 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记9 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏10 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数10 小时前
掌握JavaScript函数封装与作用域
前端·javascript