CODEWITHSUNDEEP
cssoverflow
michal-lipski
michal-lipski

Reputation: 91

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

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.

Upvotes: 1

Views: 395

Answers (3)

herinkc
herinkc

Reputation: 346

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.

Upvotes: 0

Christoph
Christoph

Reputation: 51211

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.

Upvotes: 2

phonicx
phonicx

Reputation: 479

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

Upvotes: 0

Related Questions