Firefox：使用最小宽度和最大高度时如何防止水平滚动条？答案

【问题标题】：Firefox: How to prevent horizontal scrollbar with when min-width and max-height is used?Firefox：使用最小宽度和最大高度时如何防止水平滚动条？
【发布时间】：2013-04-10 10:05:24
【问题描述】：

我有一个动态创建的表格放在一个 div 中。整个结构可以在页面上任意定位。要求是（自动垂直滚动条，从不水平滚动条）：
- 文本较长时放大的最小宽度
- 最大高度和当有更多行时应该出现滚动条。
HTML：

<div class="container" style="top:5px;">
<table>
  <tr><td style="white-space: nowrap;">Lorem ipsum dolor sit amet, consectetur adipisicing elit;</tr></td>
  <tr><td>2ed do eiusmod tempor</tr></td>
  <tr><td>3ed do eiusmod tempor</tr></td>
  <tr><td>4ed do eiusmod tempor</tr></td> 
</table>

CSS：

.container {
   background-color: grey;  
   max-height: 50px;min-width: 70px;
   overflow-y: auto;
   position: absolute;}

http://jsfiddle.net/PUMAj/

代码在 IE (10) 中按预期工作，但在 Firefox 中出现垂直滚动条时会出现水平滚动条。似乎在 Firefox 中没有正确计算滚动条的宽度。我试过overflow:-moz-scrollbars-vertical;，它隐藏了水平滚动条（How to get firefox to show an auto horizontal scollbar for a div?），但部分文本隐藏在滚动条下，overflow-y:scroll; 导致垂直滚动条始终存在，但不隐藏文本。

编辑

想要的输出是 (IE10)

但在 Firefox 中我有这个：

建议的溢出隐藏不是解决方案。

overflow-y:hidden（无法滚动）

overflow-x:hiden（部分文字被隐藏）

【问题讨论】：

溢出-y：隐藏； ?
或者overflow: auto。它只会在内容超过容器尺寸时显示滚动条。
@davidb 必要时我需要有 y 滚动条，但在 Firefox 中显示它会显示 x 滚动条（由于尺寸错误？）。
Firefox 80 中仍然存在此错误。（2021 年）

标签： css firefox html cross-browser scrollbar

【解决方案1】：

只需在右侧添加一些填充:)

padding-right: 8px;
overflow-x: hidden;

http://jsfiddle.net/PUMAj/18/

【讨论】：