Break out of overflow:hidden

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.

Ritchey

Do you need to use overflow: hidden? You could set it to visible and clear: both afterwards. – Quan

What you want is to show the drop down? Why don't you take out the overflow: hidden? – Argillite

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. ;) – Rhetoric

If you’re not sure what that is you can find more information here: css-tricks.com/reduced-test-cases – Rhetoric

Answer 1

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

Zach

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

Answer 2

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

Coffer

I really liked the grand-parent/parent/child break down, it's super clear! Great explanation – Harned

@Harned Yes, of course! You gotta respect your elders ;) – Coffer

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? – Toluate

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

Rhetoric

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. – Zach

Thanks for the explanation @IlyaStreltsyn! That was not at all clear from the original question. – Rhetoric