溢出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;
}

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

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

基本上我希望绿色框是容器,它强制内容隐藏在Y轴上,但允许内容按照屏幕截图在X轴上流出:

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

绿色框应该被限制在200px宽,以便低于其高度的内容被切断,并且蓝色框应该能够流出(通过绝对位置)而不影响绿色框的宽度(如果绿色框的宽度可以正常工作我删除了溢出的隐藏).

Answer 1

改编自贾斯汀·克劳斯（Justin Krause）在这个线程中的答案，这对我有用： CSS Overflow-x:visible; 和溢出-y：隐藏；导致滚动条问题。

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

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

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

Answer 2

因此，我能够实现此功能的唯一方法是将蓝色框的位置设置为固定，然后使用 JavaScript 更改文档就绪和窗口大小调整时的顶部和左侧值。

在这里小提琴： http: //jsfiddle.net/3dhdy9e9/15/

代码：

function positionBox(){
 var left = $('#theBox').offset();
left = left.left;

var top = $('#theBox').offset();
top = top.top;

    $('#theBox').css({ 'position': 'fixed', 'left': left, 'top': top });   
}

$(document).ready(function(){
    positionBox();
    $(window).resize(function(){
        positionBox();
    });
});