相关文章推荐
宽容的毛衣  ·  聚焦2024汉诺威商用车展,未势能源携高效氢 ...·  7 月前    · 
想旅行的书签  ·  夜月直播官方版-相关推荐-应用宝官网·  1 年前    · 
喝醉的镜子  ·  fabricjs相关方法知识点 - ...·  1 年前    · 
坚强的葫芦  ·  电影《这个杀手不太冷静》好看吗? - 知乎·  1 年前    · 
风度翩翩的豆腐  ·  不寻常:巴黎地铁站鬼魅变身闹鬼豪宅 - ...·  1 年前    · 
Code  ›  vue.js - flex 布局 overflow-失效的问题? -
css overflow flex布局
https://segmentfault.com/q/1010000042954222
豪情万千的路灯
1 年前
segmentfault segmentfault
注册登录
问答 博客 标签 活动
发现
✓ 使用“Bing”搜本站 使用“Google”搜本站 使用“百度”搜本站 站内搜索
注册登录
  1. 首页
  2. 问答
  3. vue.js
  4. 问答详情

flex 布局 overflow-失效的问题?

头像
FFF方
216 1 24
发布于
2022-12-01
湖北
更新于
2022-12-01

很正常的一个上下两个 div 。外层有一个 wrapper 我没有标记,只是很简单的 flex 布局,flex-direction :column

image.png

我的需求是想达到设置了 flex-grow 的那个 div 内容溢出的话出现滚动条。

我发现在第一个 div 上设置 overflow-scroll 失效。

如果要达到我想在 flex-grow 那个 div 内实现内容溢出出现滚动条的功能的话,该如何设置呢?
是我理解错了吗

html5 html vue.js css
阅读 1.8k
3 个回答
得票 最新
头像
linong
28.3k 7 51 87
发布于
2022-12-02
北京
✓ 已被采纳

scroll 出现的条件之一是 内容超出容器 ,所以我猜你没设置高度 height 或者 max-height。

当然你有可能设置了 100%,但是我猜你上级没设置。所以你可以考虑用 vh 这个单位

头像
Meathill
19.9k 9 25 29
发布于
2022-12-02
广东
  1. 使用 overflow-* 的隐含条件是,该容器需要有 max-height 。
  2. flex:1 存在两种情况:

    1. 自然弹性,即从某一级父容器继承了高度,然后填满。此时其实它没有隐藏的 max-height 属性。
    2. 父容器指定了高度,那么它就有了 max-height
  3. 所以表现很奇怪,有时候有,有时候没有
  4. 我目前的解决方案是如果没有,就给它的父元素加高度,或者给合适的父元素加高度
头像
beckyyyy
515 1 7
发布于
2022-12-02
浙江
更新于
2022-12-02

可以试试给设置了 flex-grow 的容器里的内容外面再包一层div,给这个div设置 height: 100%; overflow: scroll;

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
  • JS前端数字计算精度丢失问题,请问各位是怎么解决的?
    比如计算百分比,乘除法,js计算有小数点,精度会丢失,通过toFixed可以截取小数后几位,但是会四舍五入,而toPrecision则需要指定数字长度。现在要保留小数点后2位,请问怎么处理

    12 回答 2.9k 阅读 ✓ 已解决

  • 学习tailwind.css的必要性?
    现在有 CSS预处理器:less、scss等方案,这些方案基本上都可以简化 CSS 代码编写。现代CSS解决方案 tailwind.css 将 CSS 简化并书写到标签,这种书写方式与传统的CSS不同,最终呈现的效果是一样的。

    6 回答 962 阅读 ✓ 已解决

  • 自增主键不会暴露数据吗?
    假如有一个get请求的接口,传的参数是id = 1这样子的,那么不是可以被用户拿到所有的数据了吗 {代码...} 像这种情况怎么处理呀如果这个情况的话,被别人调用了删除的接口不是很恐怖吗,因为删除接口也是传一个id过去后端就删除了

    10 回答 5.9k 阅读

  • 请问下这种css样式如何写?
    左下角和右上角的样式怎么写呢?

    4 回答 2k 阅读 ✓ 已解决

  • css或者js如何判断一堆span标签垂直方向上不在第一行?
    看那些灰色字体的一部分,这是展示搜索历史的,我现在对他们的样式设置的 margin 只有margin-left:6px,第一个的 margin-left 的值是0,这个好解决,但是一旦换行之后第二行和第一行的内容就贴着了,我想请问能否智能实现当 span 标签到第二行去了自动给第二行的 span 标签加上margin-top 值呢?谢谢。

    8 回答 1.7k 阅读 ✓ 已解决

  • 这种css复杂(且动态)的UI的效果该如何实现?
    图一:1、动态时间轴的长短根据起止时间来定的,就是说如果时间更长,结束点有可能继续往下(拐弯)走;2、灰色表示整个轴的长度,渐变(彩)色表示实际进度;3、时间轴上的小圆点也是动态的,表示某一天对应的位置;4、点击时间轴上的白色小圆点,会弹出对应的下拉卡片,卡片有堆叠效果,表示可以继续展开,点击卡片上...

    4 回答 884 阅读 ✓ 已解决

  • 如何HTML 每次要求用户重新手输账号密码,不记忆?
    如何HTML 每次要求用户重新手输账号密码,不记忆?想要避免多人使用同个设备有记忆功能,使用别人账号问题

    3 回答 1.2k 阅读 ✓ 已解决

宣传栏
产品
热门问答
热门博客
热门课程
最新活动
翻译
勋章
课程
Java 开发课程
PHP 开发课程
Python 开发课程
前端开发课程
移动开发课程
资源
每周精选
用户排行榜
帮助中心
建议反馈
合作
关于我们
广告投放
职位发布
讲师招募
联系我们
合作伙伴
关注
产品技术日志
社区运营日志
市场运营日志
团队日志
社区访谈
条款
服务协议
隐私政策
下载 App

Copyright © 2011- 2023 SegmentFault. 当前呈现版本 23.08.17

浙ICP备15005796号-2 浙公网安备33010602002000号 ICP 经营许可 浙B2-20201554

杭州堆栈科技有限公司版权所有

 
推荐文章
宽容的毛衣  ·  聚焦2024汉诺威商用车展,未势能源携高效氢能解决方案闪耀亮相|氢燃料|新能源_网易订阅
7 月前
想旅行的书签  ·  夜月直播官方版-相关推荐-应用宝官网
1 年前
喝醉的镜子  ·  fabricjs相关方法知识点 - rachelch - 博客园
1 年前
坚强的葫芦  ·  电影《这个杀手不太冷静》好看吗? - 知乎
1 年前
风度翩翩的豆腐  ·  不寻常:巴黎地铁站鬼魅变身闹鬼豪宅 - Sortiraparis.com
1 年前
今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
Code - 代码工具平台
© 2024 ~ 沪ICP备11025650号