我在Firefox中遇到了这种情况的问题。 #pager获取其子项的宽度。但是,在Chrome中,它需要其父级的宽度。如何在Firefox中使#item-list尊重其父级的宽度?
看看吧! https://jsfiddle.net/owmpatbh/2/HTML:
<div id="wrapper">
<div id="sidebar"></div>
<div id="main">
<div id="content">
<p id="stuff">blahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblah</p>
</div>
<div id="pager">
<div id="item-list">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</div>
</div>
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;
}
答案 0 :(得分:3)
firefox的对象宽度#item-list
有问题。我想不出别的什么,那么这是一个错误,至少铬在宽度上不那么挑剔。所以,你要做的就是给它一个固定的宽度,如redbmk所说。所以这是解决方案:
将#item-list
位置设为absolute
,并为其width
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;
}
我还在代码中更改了一些小的(不是很重要的东西)。
在此处查看:
干杯!
答案 1 :(得分:1)
这是一个有效的链接https://jsfiddle.net/ymvmf6zz/1/
显然在#sidebar和#main上明确设置宽度使其正常工作。
#sidebar{
width: 25%;
}
#main{
width: 75%;
}