我在Firefox中遇到了这种情况的问题. #pager获取其子项的宽度.但是,在Chrome中,它需要其父级的宽度.如何在Firefox中使#item-list尊重其父级的宽度？
看一看！ https://jsfiddle.net/owmpatbh/2/
HTML：
CSS：
#wrapper {
display: flex;
width: 100%;
height: 100%;
}
#sidebar {
overflow: auto;
flex: 0.25;
border:3px solid green;
min-height: 200px;
}
#main {
display: flex;
flex: .75;
flex-direction: column;
border:3px solid orange;
}
#content {
position: relative;
width: 100%;
flex: 0.85;
border: 3px solid blue;
}
#pager {
display: flex;
position: relative;
width: 100%;
background-color: #fff;
border: 3px solid pink;
flex: 0.15;
}
#item-list {
border: 1px solid black;
width: 100%;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
.item {
display: inline-block;
padding: 5px;
width: 200px;
height: 200px;
background-color: red;
}
#stuff {
height: 200px;
}
*{
margin: 3px;
}
最佳答案
firefox的对象#item-list的宽度有问题.我想不出别的什么,那么这是一个错误,至少铬在宽度上不那么挑剔.所以,你需要做的是给它一个固定的宽度,如redbmk所说.所以这是解决方案：
将#item-list位置设置为绝对值,并将其宽度设置为100％(在示例中减去div的边框).
#pager {
display: flex;
position: relative;
background-color: #fff;
border: 3px solid pink;
height:246px;
}
#item-list {
border: 1px solid black;
position:absolute;
width: calc(100% - 9px);
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
我还在代码中更改了一些小的(不是很重要的东西).
看到这里：
干杯!
原文链接：https://www.f2er.com/css/427212.html