我在 Firefox 中遇到这种情况的问题。 #pager 采用其子项的宽度。但是,在 Chrome 中,它占用其父元素的宽度。我怎样才能让#item-list 在 Firefox 中尊重其父级的宽度?
快来看看吧! 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;
}
最佳答案
firefox 对象 #item-list
的宽度有问题。我想不出其他任何东西那么这是一个错误,至少 chrome 在宽度上不那么挑剔。所以,你需要做的就是给它一个固定的宽度,如 redbmk 所说。所以这是解决方案:
将 #item-list
位置设置为 absolute
并为其指定 100%
的 width
(在该示例减去了 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;
}
我还在您的代码中更改了一些小的(不是很重要的东西)。
看这里:
干杯!
关于CSS flexbox 宽度 100% Firefox,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30113733/