Overflow Overflow: Hidden

Question

I have a parent container with lots of children. Due to the reasons for the animation (children sliding in and out of the parent), I set this overflow property to hidden .

This works great, but there are a couple of children that I want to see outside of the parental boundaries.

How to make sure that only certain children are visible outside the boundaries of the parent?

Answer 1

Answer: you cannot. Either the parent element has overflow:hidden , then all child elements will be truncated, or you have overflow:(visible|auto|scroll|...) , then all children will be processed in accordance with this rule. There is no way that you could mix states - all children are treated the same.

However, you can enter additional container elements inside the parent (which no longer has overflow: hidden), as in this pseudocode:

 <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 light of more discussion with OP, this answer does not help. Instead, see the comments for clarification with the OP.

Firstly, it helps if you include certain code.

In general, specify a CSS selector that is more specific to the child than one that sets overflow: hidden;

For example,

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, as I said, only after some sample code can a more meaningful answer be provided.

Answer 3

For me, I went around this by making the parent overflow: I hid more, and then gave minus fields to the surrounding elements.