Overflow Abort: Hidden

Question

We are currently struggling to break out of a div whose overflow is hidden.

We have a drop-down menu that is populated with sentences when the user enters a type (type "c" in the search box to see). This drop-down menu is currently hidden behind the menu bar because it has “overflow hidden”.

We can break free if we remove top:100% and set the position to fixed . But we would like it to remain absolute (i.e. for mobile devices).

Created an example here: https://edukarma.com/bootstrap/

A list of dropdown options can be found in .headerItem.headerSearch .searchField .twitter-typeahead .tt-dropdown-menu .

Answer 1

A possible workaround is to replace overflow:hidden as follows:

 .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 2

You can do this by setting the position for the child: 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