Переполнение y скрытые переполнения x видимые

Question

У меня есть div (синий квадрат), который позиционируется как абсолютный на странице внутри родительского элемента (красная рамка), и мне нужно, чтобы переполнение-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/

После прочтения некоторых статей на эту тему/вопросы на переполнение стека, по-видимому переполнение переопределяется scroll, если скрытый применяется к тому же элементу DOM, поэтому я разделил код на использование box1 и box2.

В основном я хочу зеленый ящик, чтобы быть контейнером, который заставляет содержимое быть скрыты по оси Y, но позволяют содержание вытечь по оси X на скриншоте:

I не может видеть синий ящик, потому что он обрезается скрытым от переполнения Y, даже если он дочерний элемент установлен на видимый/автоматический ...

Зеленую коробку ДОЛЖНЫ быть ограничены шириной 200 пикселей, чтобы содержимое ниже его высоты срезается, и синяя коробка должна быть способна течь o ut (через абсолютную позицию), не влияя на ширину зеленой рамки (которая будет работать нормально, если я удалю переполнение скрытой).

Answer 1

Таким образом, единственный способ получить эту работу - установить положение синего поля, которое будет исправлено, а затем использовать JavaScript, чтобы изменить верхнее и левое значения на готовом документе и изменить размер окна.

Fiddle здесь: 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(); 
    }); 
}); 

Answer 2

Я думаю, что я читаю вашу проблему прямо ...

overflow-x:auto; 

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

Answer 3

В # Box2 заменить переполнение-х: видно, с переливом-х: авто. Надеюсь, что это решает вашу проблему.

Answer 4

адаптировано из ответа Justin Krause «s в этой теме, который работал для меня: CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue.

Set box1 (зеленая каймой окна просмотра), чтобы иметь поля и отступы, которые компенсируют друг друга, с запасом, охватывающему большую коробку: например

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

Это должно привести к синей коробке быть видимый без необходимости устанавливать переполнение-x.

Answer 5

Вот как я подхожу к этому.

#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>