同一容器中的div的不同的溢出行为 [英] Different overflow behavior for divs in same container

问题描述

我有什么：

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>

目前两个divA和B溢出模态窗口。

Currently both divs "A" and "B" overflow outside of the modal window.

我想要的是

• divA的溢出应该隐藏在模态之外。


• divB的溢出应在modal之外显示。

div A的大小，因为在实际情况下，我们有divA在画布上移动。

I cannot the change size of the div A because in real situation we have div "A" moving on canvas.

当我移动它的边缘时，其溢出应该隐藏。但是，B的溢出不应该。

When I move it near the edge its overflow should be hidden. But overflow of div "B" should not.

推荐答案

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

This is not possible. The css overflow property always affects all child elements. So:

1. 在上声明溢出将隐藏子div A和B。


2. 在div A上声明溢出将隐藏div B.如果溢出声明为在1或2中，则仍然可以溢出


3. 。没有选项让div B分别溢出modal或A.

1. declaring overflow on modal-body will hide both child divs A and B.
2. declaring overflow on div A will hide div B. A still can overflow.
3. if overflow is declared like in 1. or 2. there is no option to make div B overflow the modal or A respectively.

这篇关于同一容器中的div的不同的溢出行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！