Chrome与Edge的溢出差
Chrome与Edge的溢出差
提问于 2018-05-22 01:37:34
我注意到Chrome和Edge在溢出行为上的区别。
正如您所看到的运行以下代码，在Chrome中，这只显示垂直滚动条(在我看来是正确的)，而在Edge中有两个滚动条。
这有什么原因吗？我如何使Edge的行为方式与Chrome相同？
谢谢!
.container1 {
display: flex;
flex-flow: column;
align-items: flex-start;
}
.container2 {
display: flex;
flex-flow: column;
align-items: flex-start;
}
.container3 {
max-height: 150px;
overflow: auto;
}
.content {
width: 500px;
height: 200px;
background-color: blue;
}<div class="container1">
<div class="container2">
<div class="container3">
<div class="content"></div>
</div>
</div>
</div>
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-05-23 04:46:50
经过多次尝试，我找到了一个解决办法，方法是删除align-items: flex-start并将display: flex替换为display: inline-flex。以下是新代码：
.container1 {
display: inline-flex;
flex-flow: column;
}
.container2 {
display: inline-flex;
flex-flow: column;
}
.container3 {
max-height: 150px;
overflow: auto;
}
.content {
width: 500px;
height: 200px;
background-color: blue;
}<div class="container1">
<div class="container2">
<div class="container3">
<div class="content"></div>
</div>
</div>
</div>
希望它能帮到别人。
Stack Overflow用户
发布于 2018-05-22 03:13:15
以下是我认为正在发生的事情：
- 当触发溢出时(因为
height: 200px元素上的.content要比父元素上的max-height: 150px高)，就会生成一个垂直滚动条。 - 这个滚动条实际上占用了宽度。
.content元素被设置为width: 500px。但是一旦生成滚动条，Chrome的宽度就会增加到517 in。请注意，不同浏览器的滚动条宽度各不相同。 - Chrome似乎考虑或忽略了垂直滚动条的宽度。它避免启动水平滚动条。边缘似乎将垂直滚动条宽度视为溢出，因此启动水平滚动条.。
- 造成这种行为差异的原因可能有很多，包括呈现元素和对象的不同顺序。
有一点很清楚，如果您将width: 500px从.content移动到父服务器，水平滚动问题就会得到解决。
.container1 {
display: flex;
flex-flow: column;
align-items: flex-start;
}
.container2 {
display: flex;
flex-flow: column;
align-items: flex-start;
}
.container3 {
max-height: 150px;
overflow: auto;
width: 500px; /* new */
}
.content {
/* width: 500px; */
height: 200px;
background-color: blue;
}<div class="container1">
<div class="container2">
<div class="container3">
<div class="content"></div>
</div>
</div>
</div>
Stack Overflow用户
发布于 2018-05-22 01:47:01
试试这个：overflow-y: auto;
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50464419
复制相关文章
相似问题
腾讯云开发者
