Allow specific tag to override overflow:hidden

Question

I've got a <div>, that's a certain height and width, and overflow:hidden so that specfic inner images are clipped; however I want one image in the <div> to pop out of the border (ie to override the overflow:hidden), how do I do this?

Answer 1

overflow refers to the container not allowing oversized content to be displayed (when set to hidden). It's got nothing to do with inner elements that can have overflow:whatever, and still wont' be displayed.

Answer 2

Wrap your overflow: hidden div with another div that has a css property of -

transform: translate(0, 0);

and in your specefic tag that you want it to override the - overflow: hidden , set it with -

position: fixed; it will continue to be position relatively to its parent

i.e -

.section {
    ...
    transform: translate(0, 0);
}

.not-hidden {
    position: fixed;
    ...
}

See the fiddle here

Answer 3

I've got a super-easy solution to this problem: Use the "pre" tag. I know the pre tag is the equivalent of using "goto" in programming, but hey: it works!

<div style="overflow: hidden; width: 200px;">
  <pre style="overflow: auto;">
    super long text which just goes on and on and on and on and one, etc.
  </pre>
</div>

Answer 4

You cannot, unless you change your HTML layout and move that image out of the parent div. A little more context would help you find an acceptable solution.

Answer 5

All given answers where not satisfying for me. They are all hackish in my opinion and difficult to implement in complex layouts.

So here is a simple solution:

Once a parent has a certain overflow, there is no way to let its children override this.

If a child needs to override the parent overflow, then a child can have a different overflow than the other children.

So define the overflow on each child instead of declaring it on the parent:

<div class="panel">
    <div class="outer">
        <div class="inner" style="background-color: red;">
            <div>
                title
            </div>

            <div>                     
                some content
            </div>
        </div>    
    </div>  
</div>

.outer {
    position: relative;
    overflow: hidden;
}    

.outer:hover {
    overflow: visible;
}  

.inner:hover {
    position: absolute;
}

Here is a fiddle:

http://jsfiddle.net/ryojeg1b/1/