17

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.

Improve this question
4
  • Do you need to use overflow: hidden? You could set it to visible and clear: both afterwards. Commented Aug 26, 2014 at 17:13
  • What you want is to show the drop down? Why don't you take out the overflow: hidden? Commented Aug 26, 2014 at 17:15
  • Please provided a reduced test case in the future. When people have to guess what you’re actually trying to solve we often guess wrong. ;) Commented Aug 27, 2014 at 16:24
  • If you’re not sure what that is you can find more information here: css-tricks.com/reduced-test-cases Commented Aug 27, 2014 at 17:04

3 Answers 3

Reset to default
23

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; }
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

I really liked the grand-parent/parent/child break down, it's super clear! Great explanation
@mcnutt Yes, of course! You gotta respect your elders ;)
I don't quite understand how this is working. I had to remove the position: relative from the direct parent element to make it work. I expected my popup to jump up to the grandparent element with position: relative, but it stays where it is supposed to be. Is it magic, or am I being fooled by some annoying cache?
5

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; }
Improve this answer

1 Comment

Wow - amazing. It works. We have been fouling around with this for 6 hours now, actually also with table, but not this way. Cool!
2

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

Improve this answer

2 Comments

Usually, this should work: overflow: hidden doesn't clip absolutely positioned descendants unless the same container doesn't have position:relative (see cssmojo.com/clearfix-reloaded-overflowhidden-demystified). But in this case, it doesn't help because there is relatively positioned intermediate container between the container with overflow and the element with position:absolute. The possible workaround I've desribed below.
Thanks for the explanation @IlyaStreltsyn! That was not at all clear from the original question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.