Firefox中出现了不需要的x滚动条
即使按overflow-x: hidden;
禁用它,宽度也是错误的(字符串保持隐藏状态)。
.wrapper {
position: absolute;
}
.left {
height: 150px;
display: inline-block;
position: relative;
overflow: auto;
}
.left > div {
white-space: nowrap;
padding-left: 20px;
}
Chrome:
Firefox:
有什么建议吗?
jsfiddle使用代码:https://jsfiddle.net/5yqkoujm/
答案 0 :(得分:2)
试试这段代码:
.wrapper {
position: absolute;
}
.left {
max-height: 250px;
display: inline-block;
position: relative;
min-width: auto;
overflow-y: auto;
overflow-x: hidden;
padding-right: 20px; //this fixes scrollbar covering content
}
.left > div {
white-space: nowrap;
padding-left: 20px;
}
编辑:对于mozilla浏览器:
.wrapper {
position: absolute;
}
.left {
height: 150px;
display: inline-block;
position: relative;
min-width: auto;
overflow-y: auto;
overflow-x: hidden;
}
@-moz-document url-prefix() {
.left {
height: 150px;
display: inline-block;
position: relative;
min-width: auto;
overflow-y: auto;
overflow-x: hidden;
padding-right: 20px; //this fixes scrollbar covering content
}
}
.left > div {
white-space: nowrap;
padding-left: 20px;
}
答案 1 :(得分:1)
所以,这是我的猜测:你需要一个固定的高度和一个动态宽度,调整左边的内容div
。
默认情况下,
display:block
(默认为div
)的元素为100%宽度。display: inline
或inline-block
元素将适合其内容。 https://stackoverflow.com/a/9896303/8932080
你应该试试这个 EDITED 代码:
另一个编辑:如果没有足够的项目显示,现在会隐藏滚动条。最后但并非最不重要的是编辑,你得到了你所问的:)
.wrapper {
position: absolute;
}
.left {
height: 150px;
display: inline-block;
position: relative;
overflow-y: auto;
}
.left>div {
white-space: nowrap;
display: block; /*Nailed it, here is the fix !*/
padding-right: 20px;
}
<div class="wrapper">
<div class="left">
<div>Some not so long string</div>
<div>Some not so long string</div>
</div>
<div class="wrapper">
<div class="left">
<div>Some not so long string</div>
<div>Some not so long stringSome not so not stringSome not so not tringSome not sog stringSome not so long string</div>
<div>Some not so long</div>
<div>Some not so long string</div>
<div>Some not so long string</div>
<div>Some not so</div>
<div>Some not so long string</div>
<div>Some not so long string</div>
<div>Some not so long string</div>
<div>Some not so long string</div>
<div>Some not so long string</div>
<div>Some not so long string</div>
<div>Some not so long string</div>
</div>
</div>
希望它会有所帮助:)
通过以下帖子找到修复程序:parent div scaling to content inside it