-
2018-05-18 00:00
- 27
- 0
问题描述
flex-item（父元素flex定位，flex-item指其子元素）设置overflow-x: visible; overflow-y: auto后，x轴超出容器部分不被显示。这显然是不符合overflow的设定的，故想知道现象下的原因~
问题进阶
后经测试发现，flex-item只要任一轴设置过overflow值为非visible，则都会阻止超出容器的内容显示。故或许这是flex-item对overflow-x/y不支持，所以其只会生效其中一个值等~
测试例子
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="overflow对flex-item的影响">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class='container'>
<div class="menu-c">
<div class="test"></div>
</div>
<div class="main-c"></div>
</div>
</div>
</body>
</html> .container
display flex
height 200px
.menu-c
position relative
flex-shrink 0
width 40px
background yellow
/* display inline-block */
/* overflow visible */
overflow-y auto
overflow-x visible
.test
width 200px
position absolute
top 20px
left 10px
height 30px
background black
.main-c
flex 1 1 auto
background blue看例子需梯子，故代码加上display inline-block是测试是否为bfc特性影响
- 共 0 条
- 全部回答
-
究竟多冷漠 普通会员 1楼
在使用Flex布局时，如果你遇到flex-item与overflow-x/y兼容问题，那么可能是因为你的代码在某些情况下可能会导致元素超出其父元素的容器范围。
例如，如果你有一个
<div>元素，设置了overflow-x: auto，并且你的flex-item元素在这个div中，那么当这个div的宽度超过其容器的宽度时，flex-item元素就会超出其容器的范围。为了解决这个问题，你可以在创建flex-item元素时设置
overflow-x: hidden，这样即使你的flex-item元素超出其父元素的容器范围，也不会影响其布局。但是这可能会导致你的flex-item元素无法正确显示其子元素。另一种可能的解决方案是在创建flex-item元素时设置
overflow-y: auto，这样即使你的flex-item元素超出其父元素的容器范围，也可以正确显示其子元素。但是这可能会导致你的flex-item元素无法正确显示其子元素。另外，你还可以尝试使用
flex-wrap属性来解决这个问题。flex-wrap属性可以决定flex-item元素是否换行，如果你想要让flex-item元素在需要时换行，可以设置为flex-wrap: wrap。总的来说，解决flex-item与overflow-x/y兼容问题的关键是确保你的代码在所有情况下都能正确处理flex-item元素。
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部