使用overflow滚动时，如何仅保留垂直滚动并让子元素显示在根块外？

使用overflow实现内容滚动时，调整子元素的水平位置会导致根块宽度增加，必须滚动到根块末尾才能看到调整后的子元素。需求是仅保留垂直滚动，同时让子元素能够显示在根块外部。

示例中strong元素偏移后反而让.block元素宽度增加，出现水平滚动，该元素被隐藏在根块内而非偏移到外部。原代码如下：

原CSS代码 #

.block {
  position: absolute;
  width: 300px;
  max-height: 100px;
  background: cyan;
  overflow-y: auto;
  overflow-x: auto;
  padding: 10px;
}

strong {
  position: absolute;
  left: 300px;
}

原HTML代码 #

<div class="block">
  <div class="item-content">some text some text some text some text some</div>
  <div class="item-content">some text some text some text some text some</div>
  <div class="item-content">some text some text some text some text some</div>
  <div class="item-content">
    <div>some text some text some text some text some</div>
    <strong>some text</strong>
  </div>
</div>

解决方案 #

核心问题是overflow-y: auto和overflow-x: visible组合时，浏览器会强制将overflow-x转为auto，导致水平滚动出现。解决方法是拆分滚动容器和内容容器：

• 新增一个父容器负责垂直滚动，设置overflow-y: auto、固定宽高，不设置水平溢出规则。
• 原.block作为内容容器，设置overflow-x: visible，宽度继承父容器，让内部绝对定位元素可以溢出显示。
• 给.block设置position: relative，作为strong的定位基准，确保偏移位置准确。

修改后的CSS代码 #

.scroll-container {
  position: absolute;
  width: 300px;
  max-height: 100px;
  overflow-y: auto;
}

.block {
  width: 100%;
  background: cyan;
  overflow-x: visible;
  padding: 10px;
  position: relative;
}

strong {
  position: absolute;
  left: 300px;
  top: 0;
}

修改后的HTML代码 #

<div class="scroll-container">
  <div class="block">
    <div class="item-content">some text some text some text some text some</div>
    <div class="item-content">some text some text some text some text some</div>
    <div class="item-content">some text some text some text some text some</div>
    <div class="item-content">
      <div>some text some text some text some text some</div>
      <strong>some text</strong>
    </div>
  </div>
</div>

修改后，scroll-container仅处理垂直滚动，.block允许子元素水平溢出显示，strong会直接出现在根块外部，不会触发水平滚动。

内容的提问来源于stack exchange，提问作者Андрей Дьячков