溢出-x：隐藏；不会工作，但溢出-x：滚动；将要？

Posted 2023-03-06

【中文标题】溢出-x：隐藏；不会工作，但溢出-x：滚动；将要？

【英文标题】：overflow-x:hidden; won't work but overflow-x:scroll; will?

【发布时间】：2020-05-04 13:42:27

【问题描述】：

我有一个包含各种信息的表格。我正在尝试使它在内容溢出时提供水平滚动条来查看内容。

溢出-x：滚动；几乎正是我想要的，除了我不想在没有内容溢出时显示滚动条。所以溢出-x：隐藏；应该是我需要的。但是，当我使用它时，即使内容确实溢出，也不会出现滚动条。

我用过overflow-x:hidden;之前所以我不太确定出了什么问题。

可以通过codepen查看示例

有问题的 css 位于第 19 行的 .dataTables_wrapper 下

/* -----------NEED HELP HERE-----------       Cant get overflow-x: hidden to work */
.dataTables_wrapper
  overflow-x: hidden; /*This wont work, acts like overflow hidden*/
  overflow-x: scroll; /*This works and is the desired effect but i dont want the scrollbar to show if no overflow*/
  background: #1B1E24;

【参考方案1】：

设置 overflow:auto 将解决您的问题，当宽度超过时会添加滚动条

.dataTables_wrapper
  overflow:auto; /* set overflow auto */
  background: #1B1E24;

【讨论】：

哇，谢谢，我太笨了。大声笑溢出：隐藏的行为就像溢出：隐藏；那不是吗。