Overriding Overflow: Hidden

I have a parent container with a lot of child elements. Due to animation reasons (child elements sliding in and out of the parent) I have set it's overflow property to hidden. This

Solution 1:

Answer is: You can't. Either the parent has overflow:hidden then all child-elements will be clipped, or you have overflow:(visible|auto|scroll|...) then all children are treated according to that rule. There is no possibility you could mix states - all children are treated equally.

However, you could introduce additional container-elements inside the parent (which no longer has overflow:hidden) like in this pseudo-code:

<parent><container1style="overflow:hidden"><!-- these will be clipped --><element><element></container><container2style="overflow:visible"><!-- these will be shown --><element><element></container></parent>

edit: example

Solution 2:

In the light of more discussion with OP, this answer doesn't help. Instead see comments for clarification with OP.

Firstly, it helps if you include some specific code.

Generically speaking, provide a CSS selector that is more specific to the child than the one that sets the overflow: hidden;

For instance,

Style:

.hide-childrendiv {overflow: hidden;}
.hide-childrendiv.show-me {overflow: none;}

HTML:

<divclass="hide-children"><divclass="child"></div><divclass="child"></div><divclass="child show-me"></div></div>

But like I said, only after some sample code can a more meaningful answer be provided.

Solution 3:

For me I got around it by making the parent with overflow:hidden bigger and then giving minus margins to surrounding elements.