flex和overflow使用时，不能滚动的原因

最新推荐文章于 2024-12-06 17:46:49 发布
最新推荐文章于 2024-12-06 17:46:49 发布
阅读量3.8k 收藏 3
点赞数 2
分类专栏： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43517374/article/details/121751984
版权

css3 css html
当在Flex布局中遇到无法滚动的情况，主要原因是弹性布局在空间不足时会挤压元素，导致overflow失效。解决办法是通过设置flex项目的flex-shrink属性为0，禁止元素被挤压，从而使overflow生效。理解flex-grow和flex-shrink属性对于优化Flex布局滚动至关重要。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

flex和overflow使用时，不能滚动的原因

分析原因

flex属于弹性布局，在空间不够的情况下，为了布局不变，从而挤压元素，
注意这里的重点是 弹性 和 挤压

解决办法

记得flex的这两个属性吗
flex-grow 一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
flex-shrink 一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
默认是 flex-shrink为 1 ，表示可以挤压，我们只要设置flex-shrink：0 这样不允许挤压元素，overflow就可以正常用了

HarmonyOS中利用overflow属性实现横向滚动失效的解决方法
the_ghostzzz的博客
05-17 1203
HarmonyOS中overflow实现横向布局失效解决方案
css overflow不生效，与flex:1共同使用出现的问题
PrimaryColor
07-16 1005
示例效果图：最外层一个弹性盒子，分为两个区域，1号区域和2号区域；2号区域又是一个弹性盒子，分为2号区域和3号区域，现在的需求是滚动第3号区域。 代码如下，按道理来说应该可以实现效果图： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial.
flex布局实现上下固定中间滑动的布局方式
11-20
本文主要介绍了flex布局实现上下固定中间滑动的布局方式，分享给大家，具体如下: 例如这样的一个页面，希望有个头图，有个底部的底栏，中部内容区域可滑动。 简单介绍一下如何实现 固定头部和尾部，中间部分可滑动，使用flex布局 1.设置html，body高度为100% 2.设置最外层div的布局方式为弹性布局display:flex; 3.设置最外层div的主轴方向为flex-direction: column;主轴为垂直方向，起点在上沿 row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 colum
overflow-x横向滚动条不可滚动的原因
weixin_42342065的博客
12-14 1583
在工作中遇到一种比较特殊的情况，当div内容宽度超过外层div总宽度的时候添加横向滚动条overflow-x:auto，正常这样来操作是没有什么问题的，但是遇到一个很奇怪的问题，满足上面任何条件了，但是滚动条却滚动不了，原因排查后发现是因为。以上是遇到的比较奇葩的情况，在此记录下。
css中overflow属性失效，页面始终不能滚动显示溢出的内容
weixin_51248307的博客
01-10 3594
如果overflow设置正确，出现这种问题大抵是因为position属性的设置为了fixd，这导致页面中的内容相对于页面是一定的，包括溢出的内容，他也在页面的某一个位置。而页面滚动本质上页面这个panel没有变，变的是显示的内容，所以既然元素是fix的，那滚动就相当于要破坏这个fixd，所以导致overflow失效。
flex布局 flex-end为什么overflow无法滚动及解决方法
AAAXiaoApple的博客
12-06 762
flex布局 flex-end为什么overflow无法滚动及解决方法
overflow：scroll滚动条可以拉但是不能滚动
君兮的博客
12-07 3416
overflow：scroll滚动条可以拉但是不能滚动
flex布局影响overflow页面滚动
01-04
对于希望在一个采用 `flex` 方向（无论是水平还是垂直）排列的区域中实现滚动的情况，除了要保证外层容器有明确尺寸之外，还需要特别注意内嵌元素是否被赋予合适的 `min-width/min-height` 和 `max-width/max-height...
overflow: scroll;出现滚动条为什么不能滚动
最新发布
03-08
` 出现滚动条但无法滚动时，常见原因和排查方法如下： --- ### 1. **内容未超出容器范围** - **现象**：滚动条显示但不可拖动（灰色不可用状态）。 - **原因**：内容实际未超过容器的尺寸（宽度或高度）。 - **...
flex滚动条三种实现方式
08-19
在Flex容器上，如果`overflow`属性设置为`auto`或`scroll`，则会在需要时显示水平或垂直滚动条。例如： ```css .container { display: flex; overflow: auto; /* 或 &#39;scroll&#39; */ } ``` 这种方式简单易用，但...
overflow:auto的用法详解
01-18
overflow和flex布局搭配使用 代码如下： <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>overflow:auto的用法</title> <meta name=viewport content=
flex布局，滚动条失效问题
hryztt123的博客
06-07 3710
问题描述： 在flex布局中，设置了overflow：auto，没有出现滚动条 解决方案： 重新设置滚动条样式
iOS Safari上overflow: scroll无法滑动解决
MichaelAn的博客
02-13 2519
iOS Safari上overflow: scroll无法滑动解决 问题描述 此bug出现需要条件：父元素需使用绝对定位absolute或固定定位fixed，使用overflow: scroll / auto(或overflow-y: scroll / auto)，内部子元素是动态大小(例如较大的svg docume...
解决flex布局下无法滚动的问题
IU
08-12 4704
flex布局的flex-shrink使用详解
overflow出不来游览器滚动条的问题
qq_40946374的博客
01-08 2054
overflow不显示滚动条是因为position的fixed属性
关于flex布局下，overflow滚动失效的原因
qq_44945983的博客
08-12 5793
今天碰到一个问题，请看图片 这里给父元素设置了宽度、flex，子元素也设置了宽度，这里是想让超出宽度出现滚动效果，就是因为加了flex，发现滚动失效了。解决办法如下： 给子元素加 flex-shrink: 0; 这样就可以了，让子元素不可被压缩。完美解决。 ...
jquery弹窗时禁止body滚动条滚动
weixin_30426957的博客
06-14 240
当弹出一个jq提示窗口的时候，一般窗口右边还会有进度条的情况，禁止进度条方法禁止浏览器滚动条滚动： $('body').css({ 　　"overflow-x":"hidden", 　　"overflow-y":"hidden" }); 关闭弹出的窗口的时候需要显示出来，让浏览器窗口可以继续滚动 还原滚...
overflow问题--滚动设置？
weixin_33806300的博客
04-28 171
左边保持不变，右边多出来的table的td要设置为overflow:scroll,但是有个问题，就是，无论td的宽度设置为多少，它都会按照表格的百分之百来自适应，根本不会出现滚动条，查阅了一些资料以后，找到了解决方案。1.table要给它设定一个父级div,并且设置父级div的属性-overflow:auto;display:block。2.设置table的属性-min-width:100...
div包裹页面后多余部分没有显示，也没滚动条 overflow 属性设置
weixin_34221073的博客
03-25 1051
今天弄个div套着一个页面结果那个页面超出范围后页面没有滚动条可以滚动浏览下面的内容，原来是设置了overflow的hidden属性 visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值