Firefox - 不必要的x滚动条

时间:2017-11-13 12:02:58

标签: css firefox

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:

enter image description here

Firefox:

enter image description here

有什么建议吗?

jsfiddle使用代码:https://jsfiddle.net/5yqkoujm/

2 个答案:

答案 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: inlineinline-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