如何同时允许容器上的垂直滚动和子级上的水平溢出？答案

【问题标题】：How to allow vertical scroll on a container and horizontal overflow on the children at the same time?如何同时允许容器上的垂直滚动和子级上的水平溢出？
【发布时间】：2021-04-30 19:50:03
【问题描述】：

我有一个可滚动的 div，其中包含 >100% 的视口高度的许多项目。这个可滚动的 div 必须允许：

垂直滚动
容器外的元素（水平溢出）

尝试和结果：

当 overflow = auto (.el-list) 时，容器是可滚动的，但子级 (.item) 在超出容器宽度时会被隐藏
当溢出 = 可见时，不可滚动但会发生溢出。

这似乎不起作用，因为 x 和 y 没有被独立处理（这个想法是允许滚动 y 但仍然有 x 溢出）

overflow-x: auto !important;
overflow-y: scroll !important;

answer 解释了原因：

如果您对overflow-x 或overflow-y 使用visible 以及对另一个使用非可见值，则可见值将被解释为auto。

在溢出的子元素上设置position: fixed 允许它溢出，但它完全忽略了对父元素的定位。正如预期的那样，sticky 和 static 也忽略了 left: 定位。
方法与 1-2 相同，但 .item 通过 :after/:before 呈现 不会改变结果

代码结构： (Jsfiddle)

.el-list {
 position: relative; 
 height: 100%
 width: 200px;
 overflow: auto; // treated as hidden
}

.item  { 
  position: relative;
}

.overlay-item {
  position: absolute;
  left: -50px;
}

   <div class="el-list">
     <div class="item"><div class="overlay-item"></div></div>
     <div class="item"><div class="overlay-item"></div></div>
   </div>

有没有办法至少在 webkit 浏览器（移动 webviews）上实现预期的行为？

...理想情况下，在 android 4.* 中包含较旧的 android webview？

编辑：css-tricks 解决方案很有趣：除了容器的父级（宽度比父级更大，即 el-list 本身）之外没有定位似乎很有希望，但在有多个祖先时不实用

（首先定位祖先是dom元素流的基础，这一定是有原因的:-)！ )

作为参考，HTML 如下所示：

   <div class="el-list-parent"> <!-- parent of scrollable div -->
       <div class="el-list">
         <div class="item"><div class="overlay-item"></div></div>
         <div class="item"><div class="overlay-item"></div></div>
       </div>
    </div>

【问题讨论】：

标签： css google-chrome android-webview css-position

【解决方案1】：

我解释的问题似乎有两种解决方案：

css-tricks approach（通过 javascript 设置相对于窗口的定位）

在没有填充的情况下制作父级 (.el-list)（在我的情况下，我可以使用填充来使父级变大）
通过将缺失的父级填充应用于其子级来补偿缺失的父级（我们希望有空间但也有水平溢出的 padding-left 或 padding-right）

【讨论】：