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? — Mm-Art-In
– Mm-Art-In, Commented Feb 16, 2015 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
– Cameron, Commented Feb 16, 2015 at 14:40
as stated by others - overflow-x: visible seems to do what you want — Mm-Art-In
– Mm-Art-In, Commented Feb 16, 2015 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. — Mm-Art-In
– Mm-Art-In, Commented Feb 16, 2015 at 14:49
Possible duplicate of CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue — Zach Saucier
– Zach Saucier, Commented Mar 16, 2017 at 20:51

fuzzy marmot · Accepted Answer · 2017-12-15 19:15:15Z

8

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, 2017 at 19:15

answered Dec 21, 2016 at 23:49

fuzzy marmot

4135 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ogier Schelvis Over a year ago

The margin should be negative then, right? Because negative value for padding is invalid.

Jan Švábík Over a year ago

This is the answer that really helped me with my case, don't understand why nobody mentioned it in similar questions.

Andrea Carraro · Accepted Answer · 2017-01-26 14:45:31Z

1

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>

answered Jan 26, 2017 at 14:45

Andrea Carraro

10.6k5 gold badges40 silver badges59 bronze badges

Comments

Cameron · Accepted Answer · 2015-02-16 16:50:43Z

-1

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

answered Feb 16, 2015 at 16:50

Cameron

28.9k103 gold badges291 silver badges491 bronze badges

Comments

Lowkase · Accepted Answer · 2015-02-16 14:33:45Z

-2

I think I am reading your problem right...

overflow-x:auto;

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

answered Feb 16, 2015 at 14:33

Lowkase

5,6992 gold badges34 silver badges48 bronze badges

1 Comment

Mm-Art-In Over a year ago

I see no scrollbars here at all, on Firefox . Is that intended?

Collectives™ on Stack Overflow

Overflow y hidden breaks overflow x visible

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related