html - 溢出 y 隐藏中断 溢出 x 可见

Question

我有一个 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;
}

这是一个 fiddle :http://jsfiddle.net/3dhdy9e9/12/

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

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

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

绿色框的宽度应限制为 200 像素，以便其高度以下的内容被截断，并且蓝色框应该能够流出(通过绝对位置)而不影响绿色框的宽度(如果我删除隐藏的溢出，效果会很好)。

Answer 1

改编自Justin Krause在这个线程中的回答，对我有用: CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue .

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

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

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