Firefox - 不必要的 x 滚动条答案

【问题标题】：Firefox - Unnecessary x-scrollbarFirefox - 不必要的 x 滚动条
【发布时间】：2017-11-14 18:06:54
【问题描述】：

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;
}

铬：

火狐：

有什么建议吗？

jsfiddle 玩代码：https://jsfiddle.net/5yqkoujm/

【问题讨论】：

标签： css firefox

【解决方案1】：

试试这个代码：

.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;
}

【讨论】：

那么y-滚动条总是可见的:(
@holden321 在这种情况下，尝试设置overflow -y: auto;再次，并检查它是否按您希望的方式工作。只需更改高度或缩短列表即可查看。
@holden321 已修复。见评论。
padding-right 修复了 FF 中的覆盖但破坏了 Chrome 中的视图。
@holden321 现在它应该可以正常工作了。我为 Mozilla 添加了样式。

【解决方案2】：

所以，这是我的猜测：你需要一个固定的高度和一个动态的宽度，调整到左边 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

【讨论】：

作者希望它是可滚动的，如果内容超出了 div。容器里面可以有很多文字，不能占据整个页面。
@VaxoBasilidze 你需要固定宽度但动态高度？
不，自动宽度并可滚动到 y 轴。
@VaxoBasilidze 编辑回答问题
x-scrollbar 还在这里 :)