Break out of overflow:hidden - css

Question

We are currently struggling trying to break out of an div having overflow hidden.
We have a dropdown-menu that gets filled with suggestions when the user type (type 'c' in the search field to see). This dropdown-menu is currently hidden behind the menubar, because it has "overflow hidden".
We can break out, if we remove the top:100% and set position to fixed. But we would like it to stay absolute (i.e. for mobile devices).
Created an example here: https://edukarma.com/bootstrap/
The dropdown suggestion list can be found in .headerItem.headerSearch .searchField .twitter-typeahead .tt-dropdown-menu.

Answer 1

I ran into this issue and it can be quite frustrating. However after reading this article, I found the suggested answer to be quite satisfying.
Essentially, You must specify an outer parent (add a 'grandparent' tag) to be explicitly position:relative; (with overflow unspecified) and the direct parent to be overflow:hidden; instead of having both of these CSS options directly applied on the same direct parent.
The examples provided (for completeness and in case the 2012 article is lost):
Not working
HTML
<div class="parent">
<div class="child"></div>
</div>
CSS
.parent {
position:relative;
overflow:hidden;
}
.child {
position:absolute;
top:-10px;
left:-5px;
}
Working! (The Child is free to roam anywhere)
HTML
<div class="grand-parent">
<div class="parent">
<div class="child"></div>
</div>
</div>
CSS
.grand-parent {
position:relative;
}
.parent {
overflow:hidden;
}
.child {
position:absolute;
top:-10px;
left:-5px;
}

Answer 2

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;
}

Answer 3

You can do this by setting the child to be position: absolute.
HTML
<section>
Parent
<div>Child</div>
</section>
CSS
section {
width: 300px;
height: 300px;
background: dodgerblue;
overflow: hidden; /* BOOM */
}
section div {
position: absolute; /* BOOM */
left: 100px;
width: 100px;
height: 400px;
background: gold;
}
Demo: http://jsbin.com/nukic/2/edit