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.

Do you need to use overflow: hidden? You could set it to visible and clear: both afterwards. — TheFrozenOne, Aug 26 '14 at 17:13
What you want is to show the drop down? Why don't you take out the overflow: hidden? — Carlos Calla, Aug 26 '14 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. ;) — Zaqx, Aug 27 '14 at 16:24
If you’re not sure what that is you can find more information here: http://css-tricks.com/reduced-test-cases/ — Zaqx, Aug 27 '14 at 17:04

score 19 · Answer 1 · answered Jun 05 '18 at 13:29

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

I really liked the grand-parent/parent/child break down, it's super clear! Great explanation — mcnutt, Jan 31 '20 at 03:05

score 5 · Accepted Answer · answered Aug 26 '14 at 18:12

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

Wow - amazing. It works. We have been fouling around with this for 6 hours now, actually also with table, but not this way. Cool! — FooBar, Aug 26 '14 at 19:03

score 2 · Answer 3 · answered Aug 26 '14 at 17:30

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

answered Aug 26 '14 at 17:30

Zaqx

1,401
8
17

5

Usually, this should work: `overflow: hidden` doesn't clip absolutely positioned descendants unless the same container doesn't have `position:relative` (see http://www.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. – Ilya Streltsyn Aug 26 '14 at 18:50
Thanks for the explanation @IlyaStreltsyn! That was not at all clear from the original question. – Zaqx Aug 27 '14 at 16:21

Break out of overflow:hidden

3 Answers3

Not working

Working! (The Child is free to roam anywhere)

Linked