75

This is probably attempting the impossible, but I would like to display an element outside of an element that is overflow: hidden. I know that makes no sense and things are working as they should, but just wanted to double check to see if there is a way.

Best described with this code:

.outer {
  position: fixed;
  top: 30px;
  left: 50px;
  overflow: hidden;
  height: 30px;
  width: 300px;
  background: red;
}

.inner {
  position: relative;
}

.show-up {
  width: 100px;
  height: 300px;
  background: green;
  position: absolute;
  left: 20px;
  overflow: visible;
}
<div class="outer">
  <div class="inner">
    <div class="show-up">this needs to show up ALL 300 pixels high of it</div>
  </div>
</div>

View on JSFiddle

4
  • 2
    What are you trying to accomplish? what is the overflow:hidden; there for? Jun 26, 2013 at 19:38
  • I'm not sure. I don't think this is actually possible. Maybe you can try setting the inner element to "position: absolute;". I doubt that'll work though. Why must the outter element be overflow hidden?
    – Karim
    Jun 26, 2013 at 19:38
  • 1
    This situation can be good for adding element for tooltip, that should be visible only on hovering the parent. And you want the tooltip to go outside the overflow:hidden element.
    – Amos N.
    Feb 28, 2016 at 9:00
  • This article may be of interest.
    – Timmmm
    May 1, 2020 at 6:57

5 Answers 5

37

The overflow:hidden definition will hide anything inside that element that extends beyond its bounds.

Depending on your specific application, you may be able to use a structure like this:

.container {
  position: fixed;
  top: 30px;
  left: 50px;
  height: 30px;
  width: 300px;
  background: red;
}
.outer {
  overflow: hidden;
}
.inner {
  position: absolute;
}
.show-up {
  width: 100px;
  height: 300px;
  background: green;
  position: relative;
  margin-left: 20px;
}
<div class="container">
  <div class="outer">
    <div class="inner"></div>
  </div>
  <div class="show-up">this needs to show up ALL 300 pixels high of it</div>
</div>

View on JSFiddle

0
22

Make an additional outer div with position relative and set the absolute position of the div you want to move outside of the overflow hidden div.

.container{
  position:relative;
}
.overflow-hid-div{
  overflow:hidden;
  margin-left:50px;
  width:200px;
  height: 200px;
  background-color:red;
}
.inner{
  width:50px;
  height: 50px;
  background-color:green;
  position: absolute;
  left:25px;
  top:25px;

}
<div class='container'>
    <div class='overflow-hid-div'>
        <div class='inner'>
            sup!
        </div>
    </div>
</div>

https://jsfiddle.net/JerryGoyal/ysgrevoh/1/

21

I was struggling for ages with this for a tooltip. My containing element is overflow: hidden and add I can't add extra wrapper divs because it causes some weird bug with flexbox and ResizeObserver. As far as I know there is no way for a position: absolute element to escape a parent that is both overflow: hidden and position: relative.

However I discovered that position: fixed elements aren't clipped by overflow: hidden at all, and it's actually easier to use position: fixed in my case. Might be an option for some.

6
  • Saved my day ! Had the same problem for a date-picker inside a table (which had an overflow: auto). I still don't understand why position: fixed still move the element on scroll (as if it was not fixed), but perfect for me !
    – Random
    Aug 6, 2020 at 10:08
  • Can you make some live example? It seems that it's not working for me.. Nov 13, 2020 at 13:40
  • I am facing a similar issue for tooltip and have created a question: stackoverflow.com/questions/68456708/… Can you please answer it or maybe post a link to the solution that worked for you?
    – Lucky
    Jul 20, 2021 at 16:36
  • I think this should be the accepted answer as it required no additional changes to my layout and worked perfectly. Mar 8 at 11:26
  • you mean overflow: hidden, right? there's no overlay..
    – Christian
    Jun 19 at 14:27
6

please check the following fiddle I created: http://jsfiddle.net/NUNNf/12/

You should add an external container like such:

<div class="container">
    <div class="outer">
        <div class="inner">
            ...
        </div>
    </div>
    <div class="show-up">this needs to show up ALL 300 pixels high of it</div>
</div>

and then add the elements inside.

Styling:

.outer {
    position: absolute;
    top: 30px;
    left: 50px;
    overflow:hidden;
    height: 30px;
    width: 300px;
    background: red;
}

.container {
    position:relative;
}

.inner {
    position: relative;
}

.show-up{
    width: 100px;
    height: 300px;
    background: green;
    position: absolute;
    left: 20px;
    overflow: visible;
    top: 30px;
}
1
  • That looks great, but your fiddle doesn't reflect your code show here.
    – showdev
    Jun 26, 2013 at 19:51
0

If you want to adjust how content overflows in a container without hiding it, you can use the overflow CSS property with a value other than "hidden." There are three main values you can use:

  1. overflow: visible;: This is the default value, and it allows content to overflow the container without any clipping. It will be visible outside the container, potentially overlapping other elements.
.container {
  [overflow: visible;][1]
}
  1. overflow: scroll;: This value adds both horizontal and vertical scrollbars to the container if the content overflows. Users can scroll to view the hidden content.
.container {
  overflow: scroll;
}
  1. overflow: auto;: This value only adds scrollbars if the content exceeds the container's dimensions. If there's no overflow, no scrollbars will be displayed.
.container {
  overflow: auto;
}

Here's a simple example demonstrating the use of these overflow properties:

.container {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  overflow: scroll; /* Change this to visible or auto to see the different behaviors */
}

.content {
  width: 300px;
  height: 300px;
  background-color: lightblue;
}
<div class="container">
  <div class="content"></div>
</div>

In this example, if you set overflow: scroll;, scrollbars will appear when the content exceeds the container's dimensions. If you set overflow: visible;, the overflowing content will be visible outside the container. If you set overflow: auto;, scrollbars will appear only when the content overflows.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.