Overflow y hidden breaks overflow x visible

Question

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

The 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 the 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 a fiddle: http://jsfiddle.net/3dhdy9e9/12/

After reading some articles on the subject/questions on Stack Overflow, apparently the overflow gets overridden with scroll if hidden is applied to the same DOM element, hence I have split the code to use a box1 and box2.

Basically I want the green box to be the container that forces the contents to be hidden on the Y axis but allow the content to flow out on the X axis per the screenshot:

enter image description here

I can't see the blue box because it is being cut off by the hidden from overflow Y even though it's child element is set to visible/auto...

The green box SHOULD be constrained to 200px wide so that content below the height of it is cut off, and the blue box should be able to flow out (via position absolute) without impacting the width of the green box (which would work fine if I remove the overflow hidden).

if you want "scrolled up and down" then overflow-y (the up and down) to hidden will *Not* do this. Looking at your fiddle, on my browser it has a X scrollbar and a full height box, I'm having trouble distinguishing what you actually want to achieve? Have you (or have I?) got your x's and y's muddled up? — Martin, Feb 16 '15 at 14:36
I've rephrased the question to remove the scrolling reference (as that's handled differently and out of scope of the question). Basically I want Y axis hidden but X visible. — Cameron, Feb 16 '15 at 14:40
as stated by others - `overflow-x: visible` seems to do what you want — Martin, Feb 16 '15 at 14:46
you can't achieve this update without changing your width value to being `min-width` because that is currently holding the box to a maximum 200px wide. — Martin, Feb 16 '15 at 14:49
set your box1 width to min-width:400px, then you'll have 2 x 200px boxes inside it — Martin, Feb 16 '15 at 14:54
@Martin Can't do that, I need to constrain the box1 to 200px wide! And because the blue is positioned absolute, this would usually be fine, as it allows the box1 to remain 200 wide and have content flow out (with overflow visible). — Cameron, Feb 16 '15 at 15:03
ok, I can't really add more to it at the moment, but thanks for [further] clarifying the question. — Martin, Feb 16 '15 at 17:53
Possible duplicate of [CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue](http://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue) — Zach Saucier, Mar 16 '17 at 20:51

fuzzy marmot · Answer 1 · 2017-12-15T19:15:15.463

6

Adapted from Justin Krause's answer in this thread, which worked for me: CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue.

Set box1 (the green-bordered viewport) to have a margin and padding that cancel each other out, with the margin enclosing the bigger box: for example

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

This should result in the blue box being visible without any need to set overflow-x.

edited Dec 15 '17 at 19:15

answered Dec 21 '16 at 23:49

fuzzy marmot

373
4
10

1

The margin should be negative then, right? Because negative value for padding is invalid. – Ogier Schelvis Dec 13 '17 at 16:08

score 1 · Answer 2 · answered Jan 26 '17 at 14:45

Here's how I'd 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>

score -1 · Accepted Answer · answered Feb 16 '15 at 16:50

So the only way I could get this working was to set the position of the blue box to be fixed and then using JavaScript to change the top and left values on document ready and window resize.

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

score -2 · Answer 4 · answered Feb 16 '15 at 14:33

-2

I think I am reading your problem right...

overflow-x:auto;

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

answered Feb 16 '15 at 14:33

Lowkase

5,631
2
30
48

I see no scrollbars here at all, on Firefox . Is that intended? – Martin Feb 16 '15 at 14:37

Overflow y hidden breaks overflow x visible

4 Answers4

Linked