溢出 y 隐藏 溢出 x 可见

我有一个 div（蓝色框），它绝对定位在父元素（红色框）内的页面上，并且我需要将 Overflow-y 设置为隐藏，以便强制截断 Y 轴上的溢出内容，但我希望任何溢出-x 的内容都可见。

HTML：

<div id="box1">
    <div id="box2">
        <div style="width:200px;height:640px;background:red;position:relative;">
            <div style="width:200px;height:200px;background:blue;position:absolute;left:200px;top:100px;"></div>
        </div>
    </div>
</div>

和CSS：

#box1 {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    width:200px;
    overflow-y: hidden;
    border: green 10px solid;
}
#box2 {
    width: 200px;
    overflow-x: visible;
}

这是一个小提琴：http://jsfiddle.net/3dhdy9e9/12/ http://jsfiddle.net/3dhdy9e9/12/

在阅读了 Stack Overflow 上有关该主题/问题的一些文章后，显然溢出被覆盖了scroll如果隐藏应用于同一个 DOM 元素，因此我将代码拆分为使用box1 and box2.

基本上，我希望绿色框成为容器，强制内容在 Y 轴上隐藏，但允许内容在屏幕截图的 X 轴上流出：

我看不到蓝色框，因为它被隐藏的溢出 Y 切断，即使它的子元素设置为可见/自动...

绿色框应该限制为 200px 宽，以便剪掉其高度以下的内容，并且蓝色框应该能够流出（通过绝对位置）而不影响绿色框的宽度（如果我删除了隐藏的溢出）。

改编自贾斯汀·克劳斯 https://stackoverflow.com/users/994658/justin-krause在这个线程中的答案对我有用：CSS 溢出-x：可见；和溢出-y：隐藏；导致滚动条问题 https://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue.

将 box1（绿色边框视口）设置为具有相互抵消的边距和填充，边距包围较大的框：例如

margin-right: -100px; /* width of blue box */
padding-right: 100px;

这应该会导致蓝色框可见，而无需设置overflow-x。