Exception to the overflow:hidden; property

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 sin开发者_如何转开发ce 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.

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 ?)

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?

I had a problem like this where the aforementioned solutions weren't working. There was a list of items in a container, each of which could be varying size depending on how many where in the list (with a minimum). The container was overflow: hidden; and there was a part of the items in the list that was a drop down and would be cut off.

My solution:

// get dropdown container position, make a modification, and apply to dropdown
function openDropdown(){
  var offSet = $('.dropdown.open').parent().offset();
  offSet.top = offSet.top + ($('.dropdown.open').parent().height() / 2);
  $('.dropdown.open').offset(offSet);
}

// on scroll reassess dropdown position
$(window).on('scroll', window, function(){
  if($('.dropdown.open')[0] != undefined){
    openDropdown();
  }
});

// on click close open dropdowns and open this one
$('body').on('click', '.dropdown', function(){
  $('.dropdown.open').removeClass('open');
  $(this).addClass('open');
  openDropdown();
});

Why would you need to do this? Maybe a better solution can be made.

I don't think that defining overflow: auto; selectively is possible, as overflow is applied to the parent, not it's children, so it's like having color: red and color: blue on the same element, at the same time; they just don't make sense when put together (bad example, but you get the idea).