Different overflow behavior for divs in same container

问题

What I have:

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>

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

What I want is that

• Overflow of div "A" should be hidden outside modal.
• Overflow of div "B" should be visible outside modal.

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

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

回答1:

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

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.

回答2:

This is not possible with the current HTML spec. Any element with overflow hidden prevents ANY of its children from appearing outside its bounds.

回答3:

Div B is currently a children of div A. If div A is set to overflow: hidden, this hides everything that overflows from div A. So if div B overflows, it cannot be seen since it is inside div A and div A cannot be overflown.

来源：https://stackoverflow.com/questions/15901264/different-overflow-behavior-for-divs-in-same-container