Different overflow behavior for divs in same container

What I have:http://jsfiddle.net/GC8D3/\[code\]<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>\[/code\]Currently both divs "A" and "B" overflow outside of modal window.What I want is thatOverflow of div "A" should be hidden outside modal. Overflow of div "B" should be visible outside modal.I cannot change size of 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.
 
Top