Overriding overflow: hidden

Question

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 works great but there are a couple of the children who I do want to be visible outside the parent's bounds.

How do I make it so that only certain children are visible outside the parent's bounds?

Answer 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

Answer 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.

Answer 3

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