溢出可见不使用绝对位置作为子元素

Question

对于下面的 HTML 列表，我只想让它只能垂直滚动，默认情况下它应该在水平方向可见。

即使在将溢出-x 设置为可见之后，它也被视为滚动

<div class="container">
    <div class="inner-container">
        <div>Item 1</div>
        <div class="hover-arrow"></div>
    </div>
    <div class="inner-container">
        <div>Item 2</div>
        <div class="hover-arrow"></div>
    </div>
    <div class="inner-container">
        <div>Item 3</div>
        <div class="hover-arrow"></div>
    </div>
    <div class="inner-container">
        <div>Item 4</div>
        <div class="hover-arrow"></div>
    </div>
</div>


.container {
   width: 100px;
   overflow-y: scroll;
   overflow-x: visible;
   border: 1px solid black;
   height: 200px;
}

.inner-container {
  position: relative;
  height: 100px;
  background: grey;
}

.hover-arrow {
   position: absolute;
   right: -20px;
   bottom: 0;
   border-left: 20px solid grey;
   border-top: 30px solid transparent;
   border-bottom: 30px solid transparent;
}

JS fiddle 也一样 https://jsfiddle.net/m148ujcn/

Answer 1

根据W3Specs：

'overflow-x' 和 'overflow-y' 的计算值与其指定的值相同，除了某些与 'visible' 的组合是不可能的：如果一个被指定为 'visible' 而另一个是“滚动”或“自动”，然后“可见”设置为“自动”。如果‘overflow-y’相同，‘overflow’的计算值等于‘overflow-x’的计算值；否则，它是'overflow-x'和'overflow-y'的一对计算值。

简而言之：

如果我们将 overflow-x 或 overflow-y 设置为 visible 和其他 其他的，则 visible 值被视为 auto

在您的小提琴中进行了一些更改检查：JSFiddle

<div class="wrapper">
 <div class="container">
    <div class="inner-container">
      <div style="padding: 20px 20px 20px 30px;">Item 1</div>
      <div class="hover-arrow"></div>
    </div>
    <div class="inner-container">
      <div style="padding: 20px 20px 20px 30px;">Item 2</div>
     <div class="hover-arrow"></div>
  </div>
  <div class="inner-container">
     <div style="padding: 20px 20px 20px 30px;">Item 3</div>
      <div class="hover-arrow"></div>
     </div>
  </div>
 </div>