html - 具有水平 overflow hidden CSS 的可变高度 HTML 元素

Question

我需要隐藏 html 元素的水平溢出而不是垂直溢出。所以假设我有以下 HTML:

<div class="container">
  <div class="inner">
    <p>content 1</p>
  </div>
  <div class="inner">
    <p>content 2</p>
    <p> and then some more stuff</p>
  </div>
</div>

我想使用的 CSS 是这样的:

.container{
  overflow:hidden;
  width:100px;
}
.inner{
  width:200px;
}

我遇到的问题是元素 div.container 的高度将为零，因为我没有在 CSS 中定义高度。但是容器中内容的高度可能是可变的，因此我无法设置特定的高度。

我可以使用 JavaScript 动态设置元素的高度，但我想避免这样做。

Answer 1

由于没有高度(是变量)，Y轴不会溢出，没必要。容器将根据需要在 Y 上简单地扩展以适应内部内容，因此即使您使用 overflow:visible; 强制溢出可见性或 overflow-y:visible;它将没有滚动条。

如果您需要垂直溢出，您必须至少指定max-height:<value>.<units>; & overflow-y:auto; overflow-x:hidden; , 因此，如果内容在 Y 轴上溢出，它会显示一个滚动条。