overflow与flex同时使用发现的问题

最新推荐文章于 2024-07-02 18:12:01 发布
最新推荐文章于 2024-07-02 18:12:01 发布
阅读量8.1k 收藏 1
点赞数
分类专栏： 响应式web设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zadastudyhard/article/details/50469220
版权

这里讲一下，页面整体的布局都是用flex，即栅栏式布局，而用这个布局的好处是如果浏览器长度或者宽度手动调整，无需代码，页面会随之调整

而用flex为什么会与overflow扯上联系呢？

因为我要现实一组数据 大概50组 但是使用了插件iscroll来实现多余数据下拉显示，由于我的插件的父级div在一个使用flex的section 里面，也就是说高度是浏览器的高度自分配的，我没有给div和section设置overflow:hidden这个参数 就引起了一个情况 即：没有滚动条，当然这个原因就是父级元素被自元素的高度撑开，导致应该是500px的高度变成1500px这样的高度，因此如果不希望父元素被子元素的高度撑开，就应该设置 overflow:hidden参数

ps：一开始在谷歌发现这个问题的时候 我手动获得了500px这个值 然后给section以及div设置这个高度 使得插件可用，

但是到firefox怎么都不行，所以多观察浏览器的兼容性也可以发现自己代码的一些问题。


另外由兼容性引起的一个问题

new Date('2013-11-11 11:11:11')在谷歌下可用，在firefox和google下面均不实用

最好实用new Date('2013/11/11 11:11:11')


okay,另外奖励自己，今天棒棒嗒～

wzm10455
关注
专栏目录
overflow滚动遇到flex失效问题解决
普通程序员的随笔
12-29 1757
最近做项目的时候碰到了一个情况。需要固定头部，内容部分占据剩余空间的上下布局结构。但是出现了overflow属性遇到了flex布局失效的情况。 <style> .content { width: 300px; height: 400px; overflow: scroll; display: flex; flex-direction: column; } .mbody { background: #009688; heig.
flex: 1导致子元素超出父元素
最新发布
qq_31247149的博客
08-02 488
overflow: hidden 属性则告诉浏览器，如果一个元素的内容超出了该元素的边界，浏览器应该裁剪掉超出部分的内容，而不是让内容溢出到父元素之外。这意味着任何超出元素边框的内容都将不可见。因此，即使 flex: 1 的子元素内部的内容比预期的要多，overflow: hidden 也会确保这些额外的内容不会导致视觉上的混乱或破坏布局结构。即使子元素的内容试图超出其定义的边界，overflow: hidden 也会阻止这部分内容显示出来，从而确保整个容器的外观整洁，没有溢出的内容。
flex垂直方向布局与overflow结合使用
pscool的博客
04-29 2316
【代码】flex垂直方向布局与overflow。
flex 与 overflow
qq_41201088的博客
07-25 338
flex 与 overflow
flex 与 overflow 冲突
lihaogn的博客
06-27 264
2 outer 不使用 align-items，inner 使用 margin。与其它对齐值一起使用。如果所选对齐值导致元素溢出容器，则将元素按。父盒子高度会变化，可能会比子盒子大，也可能会比子盒子小。1 outer 的 height 为 50px。2 outer 的 height 为 120px。问题：子盒子最上面会有一部分内容显示不出来。1 修改 outer 的。
使用displsy:flex + overflow:hidden时子元素被压缩
没得简介
09-23 668
博客地址 以下结构就很可能会发生子元素被压缩: .ul { display: flex; overflow: hidden; li { display: flex; } } 效果: [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VMv2unYs-1632367338486)(/images/pasted-15.png)] 此时我的目的是做一个轮播图,想让ul在div中使用关键帧播放,做到这个效果而且元素不.
css overflow不生效，与flex:1共同使用出现的问题
PrimaryColor
07-16 793
示例效果图：最外层一个弹性盒子，分为两个区域，1号区域和2号区域；2号区域又是一个弹性盒子，分为2号区域和3号区域，现在的需求是滚动第3号区域。 代码如下，按道理来说应该可以实现效果图： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial.
overflow:auto的用法详解
01-18
overflow和flex布局搭配使用 代码如下： <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>overflow:auto的用法</title> <meta name=viewport content=
Vue2 常用用法- flex + overflow:hidden
09-25
css - flex + overflow:hidden
ie7中overflow:auto无效的解决方法
12-13
解决办法解决这个bug很简单，在父元素中使用position:relative;即可解决该bug。 代码bug重现 复制代码代码如下:<ul><li>我是很努力的前端博客，希望你会喜欢</li><li>我是很努力的前端博客，希望你会喜欢</li><li>我...
flex布局中 overflow 问题
QQ2856639881的专栏
09-10 399
如果只在left中有 overflow: auto;当 right宽度大的时候， left就被覆盖导致显示不出。
解决css中flex弹性盒子与overflow一起使用时导致的样式问题
guolijo的博客
02-03 3034
最近在写页面的时候，在一个div上同时设置了flex和overflow后，出现了一些问题。 需求： 网站顶部导航栏为两列布局，一列为宽度固定的logo，另一列的宽度自适应，且内部元素超出时可以滚动 需求比较简单，上来就是一个flex： <div class="header"> <div class="logo">LOGO</div> <div class="navigator"> <div class="item"&g
区域交集补集反选合并等操作
qq_34976270的博客
01-17 384
*求反 complement (Circle, RegionComplement) *求一个区域的补集 difference (Circle, Circle1, RegionDifference) *求多个区域的补集 symm_difference (Circle, Circle1, RegionDifference1) *求交集 intersection (Circle, Circle1, RegionIntersection) *所有区域合并 union1 (RegionDifference1, Reg
CSS 浅探flex布局中使用的overflow ，及width/height=0
japlus的博客
11-27 9675
w3school定义是： overflow:auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 对于overflow:auto的初级理解是，设置父元素height/width，若子元素溢出，则自动显示纵向/横向滚动条。 .........
flex布局之下使用overflow失效解决方案
Kobeloveu
08-24 2851
需求点：要求展示区域的盒子高度不能超出父盒子，超出部分滚动展示 问题：页面布局使用的是flex布局，使用overflow：auto，当高度超出父盒子时，出现滚动条。可是视或不生效。 解决效果展示 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&
flex跟overflow冲突问题
YuJiea11的博客
09-04 418
如果grid-item-box 是父容器，就需要加上height:0;或者height:100%。加上 flex: 1 0 auto;或 flex: 0 1 auto;
overflow遇见flex失效问题
plan_jok的博客
03-13 148
添加链接描述
overflow：auto的用法
热门推荐
boysky0015的博客
05-31 4万+
在开始正文前，我介绍一下overflow和flex布局的某些用法。 overflow：auto；如果内容被修剪，则浏览器会显示滚动条，以便查看其余内容。 flex中的属性 display: flex; flex-direction: column; 主轴为垂直方向，起点在上沿。 overflow和flex布局搭配使用 代码如下：<!DOCTYPE html> <html> <head>
overflow和flex搭配导致子元素缩小问题
CZDBGSY的博客
07-02 203
这段代码没加overflow-y前子元素会正常显示。加了后会被挤压，因为overflow后盒子bfc导致.content盒子被flex:1 定高到100%;无法被子元素撑开，也会挤压子元素；将子元素flex-shrink设置为0即可。
flex1和overflow hidden
05-29
flex1是CSS Flexbox布局中的一个属性，它表示子元素在剩余空间中所占比例，比如将子元素的flex属性设置为1，表示该元素将占据剩余空间的1份，如果有多个子元素设置了flex为1，则它们会平均分配剩余空间。而overflow:hidden是CSS的一个属性，表示隐藏溢出部分的内容，当一个元素的尺寸超出了其父容器的尺寸时，可以使用该属性来隐藏超出的部分。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值