如何解决Windows 10上Firefox和Chrome之间的Flexbox和溢出滚动条差异
我有一些内容显示在flex容器中,并且可以上下滚动(使用overflow: auto
)。 flex容器应增长以适合内容和滚动条。
在Mac上,Firefox(v79)和Chrome(v84)均可工作,因为滚动时滚动条出现在内容上方,然后消失:
在Windows 10上,Chrome(v84)在内容旁边显示滚动条:
但是,Firefox(v79)在内容上显示滚动条,并且为了查看被(垂直)滚动条隐藏的内容,添加了水平滚动条:
我可以隐藏水平滚动条(使用overflow-x: hidden
),但是垂直滚动条仍然隐藏了内容。
如何让Firefox将滚动条放在内容(如Chrome)旁边?
我尝试过min-width: 0
和box-sizing: border-box
,但效果不好。
This question描述了overflow: scroll
如何将滚动条放置在内容之外,但是即使没有溢出也可以看到滚动条。如果需要滚动,也许可以用一些JS来设置溢出?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body {
display: flex;
}
#center_horizontal {
display: flex;
flex: 1 0 auto;
justify-content: center;
max-height: 100px;
background: lightblue;
}
#scroller {
overflow: auto;
<!--overflow-x: hidden;-->
}
#content {
width: 100px;
height: 200px;
background: radial-gradient(circle at center,red 0,blue,green 100%);
}
</style>
</head>
<body>
<div id="center_horizontal">
<div id="scroller">
<div id="content"></div>
</div>
</div>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。