如何在设置overflow-y: auto时保留X方向溢出内容？

我用::after伪元素渲染箭头：

但给容器添加overflow-y: auto后，箭头被截断：

需求：X方向的溢出内容（箭头）需正常显示，Y方向溢出时出现滚动条。能否同时保留滚动条和箭头？

原代码示例：

.flex {
  background-color: #eee;
  width: 100px;
  height: 160px;
  display: flex;
  flex-direction: column;
  border: 2px solid #333;
}

.item {
  background-color: #ccc;
  border-bottom: 1px solid #777;
  padding-left: 4px;
  line-height: 28px;
  position: relative;
}

.item3::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 0 15px 15px;
  border-color: transparent transparent transparent #ccc;
  position: absolute;
  left: 100%;
  top: 0;
}

<div class="flex">
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item item3">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>

可以通过嵌套容器实现需求：外层容器负责允许水平溢出（让箭头显示），内层容器处理垂直滚动。

修改后的代码： #

CSS

.flex {
  background-color: #eee;
  width: 100px;
  display: flex;
  flex-direction: column;
  border: 2px solid #333;
  overflow-x: visible; /* 明确允许水平溢出内容显示 */
}

.scroll-container {
  height: 160px;
  overflow-y: auto; /* 仅对垂直方向溢出添加滚动条 */
}

.item {
  background-color: #ccc;
  border-bottom: 1px solid #777;
  padding-left: 4px;
  line-height: 28px;
  position: relative;
}

.item3::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 0 15px 15px;
  border-color: transparent transparent transparent #ccc;
  position: absolute;
  left: 100%;
  top: 0;
}

HTML

<div class="flex">
  <div class="scroll-container">
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item item3">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
  </div>
</div>

原理说明 #

CSS有个规则：当单独设置overflow-y: auto时，浏览器会自动将overflow-x设为auto（为了维持容器的块级渲染上下文），这会导致水平方向的溢出内容被裁剪。通过嵌套两个容器，把垂直滚动和水平溢出的显示逻辑分离：

• 外层容器不限制垂直高度，允许水平溢出内容突破边界显示
• 内层容器负责固定高度并处理垂直滚动，不影响外层的水平溢出规则

内容的提问来源于stack exchange，提问作者Misha Moroshko