Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to ignore parent element's overflow:hidden in css

Tags:

css

overflow

I have a div element wrapping other div elements like so:

<div style="overflow:hidden">     <div id="a"></div>     <div id="b"></div> </div> 

I have other css rules that manage the dimensions of the outer div. In my actual code, I want to position the div#a exactly 10 px below the outer div. However, I want div#b to still be cut off by the outer div's overflow:hidden.

What is the best way to achieve this?

like image 626
John Avatar asked Aug 17 '12 20:08

John


People also ask

How do I fix overflowing in CSS?

To change this, set the min-width or min-height property.” This means that a flex item with a long word won't shrink below its minimum content size. To fix this, we can either use an overflow value other than visible , or we can set min-width: 0 on the flex item.

How do you hide overflow elements?

The trick is to use flex-flow: column wrap; in conjunction with overflow: hidden; on the container. The former dictates that the content is stacked vertically and that anything that does not fit should be wrapped into a second column, outside of the content box of the container.

What is the opposite of overflow hidden?

The opposite of the default visible is hidden. This literally hides any content that extends beyond the box. This is particularly useful in use with dynamic content and the possibility of an overflow causing serious layout problems.


2 Answers

Method 1

A good way to do it is by setting the overflowing element to position:fixed (which will make it ignore the parent overflow), and then positioning it relative to the parent using this technique:

​.parent {    position: relative;          .fixed-wrapper {        position: absolute;                 .fixed {            position: fixed;        }    } } 

One caveat is that you cannot have any of the top,right,left,bottom properties set on the fixed element (they must all be default 'auto'). If you need to adjust the position slightly, you can do so using positive/negative margins instead.

Method 2

Another trick I recently discovered is to keep the overflow:hidden element with position:static and position the overriding element relative to a higher parent (rather than the overflow:hidden parent). Like so:

http://jsfiddle.net/kv0bLpw8/

like image 162
parliament Avatar answered Sep 28 '22 16:09

parliament


#wrapper {   width: 400px;   height: 50px;   position: relative;   z-index: 1000;   left: 0px;   top: 0px; }  #wrapper #insideDiv {   width: 400px;   height: 50px;   overflow: hidden;   position: absolute;   z-index: 2000;   left: 0px;   top: 0px; }  #wrapper #a {   position: absolute;   height: 30px;   width: 100px;   bottom: -40px;   z-index: 1000;   left: 0px; }
<div id="wrapper">   <div id="a">AAA</div>   <div id="insideDiv">     <div id="b">BBB</div>   </div> </div>
like image 36
Ghassan Elias Avatar answered Sep 28 '22 14:09

Ghassan Elias