Allow Specific Tag to Override Overflow:Hidden

Overriding overflow: hidden

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

How to ignore parent element's overflow:hidden in css

Method 1

A good way to do it is by setting the overflowing element to position:fixed (which will make it ignore the parent overflow), and then positioning it relative to the parent using this technique:

​.parent {
position: relative;
.fixed-wrapper {
position: absolute;
.fixed {
position: fixed;
}
}
}

One caveat is that you cannot have any of the top,right,left,bottom properties set on the fixed element (they must all be default 'auto'). If you need to adjust the position slightly, you can do so using positive/negative margins instead.

Method 2

Another trick I recently discovered is to keep the overflow:hidden element with position:static and position the overriding element relative to a higher parent (rather than the overflow:hidden parent). Like so:

http://jsfiddle.net/kv0bLpw8/

Override ALL parent / grandparent / etc.... that have overflow:hidden and Witdh

If the page doesn't need to scroll this might work. It at least does what you have asked for, show the red box.

Adding position: fixed; to the element that you want to see breaks overflow: hidden;.

JSFiddle

This works because fixed elements are contained by the viewport.

W3 CSS Position Fixed

Hovered element to overflow out from an overflow:hidden element css

Unfortunately, there's no (easy) way to allow a child tag to override the effects of the overflow:hidden declaration on the parent div. See: Allow specific tag to override overflow:hidden

Your only possible recourse would be with javascript: first grab the span's offset relative to the document, then move it to another location in the DOM (i.e. direct child to the body), set its position to absolute, and use the offsets you grabbed to set its left and top properties, that would locate it at the same position within the document, but now it's not contained by the div, and so no longer needs to obey overflow:hidden.

Break out of overflow:hidden

A possible workaround is to replace overflow:hidden with the following:

.navbar .headerItem.headerSearch {
display: table; /* like overflow, creates new block formatting context */
margin-left: 180px;
padding-right: 15px;
margin-top: 11px;
}

.navbar .headerItem.headerSearch:after {
/* hack to make the table use all available width */
content: '. .';
/* with such big spacing, the 2nd dot will always wrap to the new line,
making the table-like block use the width of the container
instead of shrinking to content */
word-spacing: 99in;
/* make this helper invisible */
display: block;
height: 0;
overflow: hidden;
}


Related Topics



Leave a reply



Submit