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>    
   <container1 style="overflow:hidden">
      <!-- these will be clipped -->
      <element>
      <element>
   </container>

   <container2 style="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-children div {overflow: hidden;}
.hide-children div.show-me {overflow: none;}

HTML:

<div class="hide-children">
    <div class="child"></div>
    <div class="child"></div>
    <div class="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.