如何让 overflow-y 产生垂直滚动条答案

【问题标题】：How do I get overflow-y to produce a vertical scrollbar如何让 overflow-y 产生垂直滚动条
【发布时间】：2017-03-15 20:00:12
【问题描述】：

我正在尝试实现在外部 div 周围有一个垂直滚动条并且水平内容溢出的效果。

为此，我在 style.css 中将溢出-y 设置为自动：

.outerdiv {
    background-color:brown;
    width: 100px;
    height: 100px;
    overflow-y: auto;
}

还有 HTML：

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div class="outerdiv">
      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
   </div>
<body>
</html>

但这显示了垂直和水平滚动条。

如何摆脱水平滚动条并让内部内容（即 xxx 的）溢出到 outerdiv 容器的右侧，而只有一个垂直滚动条？

请看这个 plunker 示例：https://plnkr.co/edit/ZTODuxvaAv4XN4hGHWu9?p=preview

【问题讨论】：

请在问题本身的minimal reproducible example 中提供所有相关代码，而不仅仅是在第三方网站上。
有点跑题了，抱歉：我想知道为什么那些链接的 Plunker 页面除了标题外从不显示任何内容（在这种情况下，以及在 SO 中链接的所有其他 Plunker 页面）。你必须在那里注册才能看到任何东西吗？（我在 Firefox Mac 上，如果相关的话）

标签： html css

【解决方案1】：

你只是将overflow-x设置为隐藏：

.outerdiv {
    background-color:brown;
    width: 100px;
    height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}

【讨论】：

谢谢，但这隐藏了水平溢出的内容。我想让它从容器中溢出。

【解决方案2】：

你可以用这个去掉水平滚动条：

.outerdiv {
    background-color: brown;
    width: 100px;
    height: 100px;
    overflow-x: hidden;
    overflow-y: scroll;
}

但是在保持垂直滚动条的同时让额外的文本溢出到侧面而不是底部似乎会导致冲突。如果滚动条挡住了，它坚决拒绝在内容区域之外呈现水平溢出的文本，而是强制水平滚动条。

通过 JavaScript 和滚动事件编写非官方滚动条的脚本可能会绕过此限制。

【讨论】：