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:

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).

Answer 1

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.

Answer 2

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>