Переполнение CSS - не работает должным образом

Question

http://jsfiddle.net/bSnaG/

На мой взгляд, приведенный выше пример должен выглядеть как серая рамка, в которой #x не проходит через край, а #y высовывается из нижней части.

Но это не так - очевидно, установка overflow-x: hidden; вызывает overflow-y: scroll | auto;.

Есть ли способ обойти это?
Мне нужно разрешить некоторым элементам выходить за пределы рамки, не устанавливая overflow: visible на #box.

Answer 1

#y не может вырваться из своей ограничительной рамки, не будучи выведенным из потока документа.Дает ли добавление position: absolute; к #y эффект, который вам нужен?

Обновление

Пример реструктурированного HTML, в том числе содержащее поле, чтобы все было легкорасположены вместе.Попробуйте это здесь: http://jsfiddle.net/GfNbp

<div id="container">
    <div id="box">
        <div id="x"></div>
    </div>
    <div id="y"></div>
</div>


#box {
    width: 100px;
    height: 100px;
    margin: 10px;
    background: #ededed;
    padding: 10px;

    /* ADD THE OVERFLOW */
    overflow-x: hidden;
    overflow-y: visible;
}

#container{
    position: absolute;
    top: 30px;
    left: 20px;
}

#x {
    width: 150px;
    height: 10px;
    background: #c1ffb2;
}

#y {
    width: 10px;
    height: 150px;
    background: #c4b2ff;
    position: absolute;
    left: 20px; /* margin+padding */
    top: 30px; /* margin+padding+x-height */
}

Answer 2

Вот что у меня есть, и работает:

#box {
    position:absolute;
    width: 100px;
    height: 100px;
    margin: 10px;
    background: #ededed;
    padding: 10px;

    /* ADD THE OVERFLOW */
    overflow-y:visible;
    overflow-x:hidden;

}

#x {
    width: 150px;
    height: 10px;
    background: #c1ffb2;
}


#y {
    width: 10px;
    height: 150px;
    background: #c4b2ff;
    position: fixed;
}

Answer 3

Я думаю, что проблема в вашем росте: 100px во внешнем div. Если вы удалите этот атрибут высоты, вы получите результат, который ищете?

В противном случае, я думаю, что батва, вероятно, ударил ноготь по голове, используя три деления.