Overflow y hidden overflow breaks x visible

Question

I have a div (blue square) that is positioned as absolute on the page in the parent element (red box), and I need the overflow-y set to hidden, so that it causes the overflowed content on the y axis to be chopped off, but I want so that any content that overflows-x is visible.

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> 

and 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; } 

Here's the script: http://jsfiddle.net/3dhdy9e9/12/

After reading some articles on the topic / questions about stack overflow, obviously, overflow becomes overridden with scroll if the hidden one is applied to the same DOM element, so I split the code to use box1 and box2 .

Basically, I want the green box to be a container that made the contents hide on the Y axis, but allow the contents to be displayed on the X axis in the screenshot:

I can not see the blue box because it is disabled hidden from overflow Y, although the child is set to visible / automatic ...

The green box MUST be limited to a width of 200 pixels so that the content below its height is turned off and the blue box should flow (in absolute position) without affecting the width of the green box (which will work fine if I remove the overflow hidden).

Answer 1

Thus, the only way to get this working is to set the position of the blue field to be fixed, and then use JavaScript to change the top and left values ​​on the finished document and resize the window.

Spell here: http://jsfiddle.net/3dhdy9e9/15/

code:

 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(); }); }); 

Answer 2

Adapted from Justin Krause in this thread that worked for me: CSS overflow-x: visible; and overflow-y: hidden; causing a scroll problem .

Set field1 (a window with a green window) to have indentation and indentation that cancel each other, while the field is enclosed in a large box: for example

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

This should make the blue box visible without having to set overflow-x.

Answer 3

I think I read your problem correctly ...

 overflow-x:auto; 

http://jsfiddle.net/3dhdy9e9/1/

Answer 4

In the # box2 field, replace overflow-x: visible, with overflow-x: auto. Hope this solves your problem.

Answer 5

This is how I approach this.

 #box1 { position: absolute; top: 0; left: 0; bottom: 0; width: 200px; overflow: visible; border: green 10px solid; } #box2 { overflow: hidden; height: 100%; /* Explicitly declare an height & width */ width: 100%; } 

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