13

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?

George Reith
  • 13,132
  • 18
  • 79
  • 148
  • 2
    There is this wonderful thread on stackoverflow which you will love: http://stackoverflow.com/questions/6196725/how-does-the-css-block-formatting-context-work – YMMD May 14 '12 at 13:16
  • FYI, I added an example fiddle. – Christoph May 14 '12 at 14:10

3 Answers3

8

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

Christoph
  • 50,121
  • 21
  • 99
  • 128
1

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.

bPratik
  • 6,894
  • 4
  • 36
  • 67
  • 1
    That would set the child's overflow not change the parent's overflow in relation to it. Specific code would overcomplicate the matter I just need to know the theory. – George Reith May 14 '12 at 13:15
  • wait, I did the edit before I saw you comment, so it might be irrelevant. – bPratik May 14 '12 at 13:19
  • So, if I understamd you correctly, if there are 5 children in a parent that has it's overflow as hidden, then you want, say, 3 to be hidden when outside the bounds, but 2 to be visible?. If this is right, is there a possibility of adding scripts to handle this? – bPratik May 14 '12 at 13:22
  • that is indeed what I would like, javascript / jQuery is fine also. – George Reith May 14 '12 at 13:23
  • Right, as @christoph has said, it's not possible. But here's some food for thought: imagine your code has an outer `div` *u* that holds the parent-`div` *p* that contains the 5 children. Now, in *u*, have a copy of the 3 children that will escape the bounds of *p* positioned appropriately with their `visibility: hidden`. Now, detect when each of the 3 children go beyond the bounds of *p* and make their clone visible in *u*. – bPratik May 14 '12 at 13:32
1

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

ujohn
  • 11
  • 1