Exception to the overflow:hidden; property

Question

How is it possible to make an exception on the overflow:hidden; container property to a matched set of child elements?

Here's a sample scene:

<div style = "overflow:hidden;">    <p>item</p>    <p>item</p>    <p class="special">item that needs to show itself outside the parent borders</p> </div> 

I do have a reason why I'm doing this :] I'm building a pretty complex scrolling menu whose elements are expanding out of the menu's borders. The menu obviously clips everything outside its borders since it's scrolling around.

Here's a chunk of code relevant to the issue: http://jsfiddle.net/Birowsky/fNLbP/15/

Uncomment the marked line in the JavaScript to see the issue below the 'special item'. You might notice that the scrolling isn't working, it's ok, I think it's fiddle issue.

Answer 1

You can make the special element to be absolutely positioned

.special{  position:absolute; } 

But this will only work when the .special does not define a position (top/left/bottom/right), and also it will not be used if you later want to calculate the height of the parent div..

example : http://jsfiddle.net/gaby/aT3We/

The requirement though is a bit weird, and it might be better to rethink the whole issue..
(what exactly are you trying to achieve with this ?)

Answer 2

I don't think you'll be able to find a way to do this. Even if you do, I'd recommend against using it because it probably won't be future-proof or very cross-browser compatible.

In the case of a menu, you're probably better off putting these items in separate divs. I'd need to see your code in context to recommend a specific way of doing things, but layering your elements kinda like this might work for you:

<div style = "overflow: hidden; width: 200px; height: 100px; margin: 0; padding: 0; background-color: #CCCCCC; z-index: 1;">    <p>item</p>    <p>item</p> </div> <div style = "overflow: visible; width: 200px; height: 100px; margin: -30px 0 0 0; padding: 0; z-index: 2;">    <p class="special">item that needs to show itself outside the parent borders</p> </div> 

If that doesn't fit your needs, maybe you could describe the structure of your menus better so that we can understand what you need? Do you have a link to an example, perhaps?

Edit based on new information

After looking at your example link, it looks like what you want to do is clip content horizontally, while still allowing it to overflow vertically. You can do this by using a very high height value, and then setting a negative bottom margin:

<div style="width: 200px; height: 2000px; margin: 0 0 -1960px 0; overflow: hidden;">     <p>Thisisaverylongsentencedesignedtooverflowthewindowverticallysopleasepermitmetotypeitwithoutandspaces</p>     Item 1<br />     Item 2<br />     Item 3<br />     Item 4<br /> </div> 

Is this what you want?