同一容器中div的不同溢出行为

Question

我有什么：

http://jsfiddle.net/GC8D3/

<div class="modal-body" >
    <div style="background:red; width: 100px; height: 200px;">
        A
        <div style="background:green; width: 50px; height: 150px;">
            B
        </div>
    </div>             
</div>

目前，两个div“A”和“B”在模态窗口之外溢出。

我想要的是

• div的溢出“A”应隐藏在模态之外。
• div“B”的溢出应该在模态外可见。

我不能改变div A的大小，因为在实际情况下我们有div“A”在画布上移动。

当我将它移到边缘附近时，它的溢出应该被隐藏。但div“B”的溢出不应该。

Answer 1

这是不可能的。 css overflow属性始终会影响所有子元素。所以：

1. 在modal-body上声明溢出将隐藏子div和A。
2. 声明div上的溢出会隐藏div B.还是会溢出。
3. 如果在1.或2中声明溢出，则没有选项让div B分别溢出模态或A.

Answer 2

目前的HTML规范无法做到这一点。任何隐藏溢出的元素都会阻止其子元素出现在其边界之外。

Answer 3

Div B当前是div A的子节点。如果div A设置为overflow：hidden，则隐藏从div A溢出的所有内容。因此，如果div B溢出，则无法看到它，因为它位于div A和​​div中A不能溢出。