overflow-x：hidden设置overflow-y为自动/滚动行为

Question

我有以下HTML和CSS

<div id="box1">
    <div id="box2"></div>
</div>

#box1 {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 200px;
    height: 85px;
    background: blue;
    overflow-y: hidden;
    overflow-x: visible;
}

#box2
{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: red;
    position: absolute; 
    bottom: 0px;
    right: -5px;
}

我试图达到#box2部分位于#box1之外的效果。我希望#box1的顶部和底部溢出为hidden，但溢出左右为visible。

但是，当我在容器overflow-y: hidden上设置#box1时，似乎将overflow-x设置为滚动/自动行为。我不想要任何滚动我只想让溢出可见。有谁知道怎么做？

这是demo of the problem。

在SO上有一些类似的问题，但这些问题的解决方案并不适用于我的场景

Answer 1

不幸的是，这是您无法通过HTML结构实现的，您可以将孩子置于父母之外的唯一方法是使用position:absolute，因为您通常使用position:relative的父级。但是，如果您将父级的overflow设置为auto或x以外的任何内容，则可以裁剪位于其边界之外的所有子元素，无论y

你可以做的是添加一个包装，虽然它可能不会产生你之后的解决方案

Sample Fiddle

HTML

position:absolute

CSS

<div id="box1">
    <div id="box2">
        <div id="box3"></div>
    </div>
</div>