css - 同一容器中 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 溢出属性总是影响所有子元素。所以：

1. 声明溢出modal-body将隐藏子 div A 和 B。
2. 在 div A 上声明溢出将隐藏 div B。A 仍然可以溢出。
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 不能溢出。