Expanding a position absolute container beyond a overflow-hidden container

Question

Expanding a position absolute container beyond a overflow-hidden container

It's been a few months since I last worked on CSS, so I might be overlooking something simple. I've been struggling to find a solution to my problem, no matter how hard I try. Here is the issue:

Below is a simplified version of my code:

<div id="wrapper" style="position: fixed; overflow: hidden; height: 100%; width: 200px;">
  <div id="test" style="position: absolute; margin-left: -200px;"></div>
</div>

In essence, I need the inner div "test" to extend 200px outside the outer div "wrapper" to the left. The challenge arises from the fact that the wrapper has overflow:hidden property set, restricting elements from going beyond its boundaries. However, I cannot remove the overflow:hidden as it is required for a JavaScript plugin I am using.

Are there any alternative solutions or workarounds for this situation? Thank you!

html css overflow css-position

Answer 1

Answer №1

The only way to resolve this issue is by relocating the div outside of the container with overflow:hidden. It's not possible to specify that everything in the overflowing div should be hidden except for one specific div - exceptions cannot be made in this case.

To work around this limitation, you can add another layer to your structure where the inner div has overflow set to hidden and the outer div does not. Then, place the positioned element within the outer div. Here is a hypothetical example:

<div class="outer">
  <div class="inner" style="overflow: hidden;">
    ....
  </div>

  <div class="abs-positioned">
  </div>
</div>

If the original div had positioning along with overflow:hidden, you need to move that setting to the outer div to ensure proper positioning.

In summary, there is no direct solution that will allow you to achieve your desired outcome without modifying your CSS to remove overflow:hidden or adjusting your HTML markup.

Answer 2

The only way to resolve this issue is by relocating the div outside of the container with overflow:hidden. It's not possible to specify that everything in the overflowing div should be hidden except for one specific div - exceptions cannot be made in this case.

To work around this limitation, you can add another layer to your structure where the inner div has overflow set to hidden and the outer div does not. Then, place the positioned element within the outer div. Here is a hypothetical example:

<div class="outer">
  <div class="inner" style="overflow: hidden;">
    ....
  </div>

  <div class="abs-positioned">
  </div>
</div>

If the original div had positioning along with overflow:hidden, you need to move that setting to the outer div to ensure proper positioning.

In summary, there is no direct solution that will allow you to achieve your desired outcome without modifying your CSS to remove overflow:hidden or adjusting your HTML markup.

Answer 3

Answer №2

Elaborating on the concept introduced by Piyas De:

here is an illustration

Keep in mind, if the overflow hidden property is set with

position: relative

it may not function as expected

example that does not work

Answer 4

Elaborating on the concept introduced by Piyas De:

here is an illustration

Keep in mind, if the overflow hidden property is set with

position: relative

it may not function as expected

example that does not work

Answer 5

Answer №3

To effectively handle overflow hidden, it is important to follow these guidelines:

Absolutely position the overflowing child element
Ensure the parent with overflow hidden has static positioning
Add a second parent wrapper with relative positioning

HTML

<div class="outer-wrapper">
  <div class="wrapper">
    <div class="overflowed">(Overflowing the wrapper)</div>
  </div>
</div>

CSS

.outer-wrapper {
  position: relative;
}
.wrapper {
  overflow: hidden;
}
.overflowed {
  position: absolute;
}

FIDDLE http://jsfiddle.net/vLsmmrz6/

Answer 6

To effectively handle overflow hidden, it is important to follow these guidelines:

Absolutely position the overflowing child element
Ensure the parent with overflow hidden has static positioning
Add a second parent wrapper with relative positioning

HTML

<div class="outer-wrapper">
  <div class="wrapper">
    <div class="overflowed">(Overflowing the wrapper)</div>
  </div>
</div>

CSS

.outer-wrapper {
  position: relative;
}
.wrapper {
  overflow: hidden;
}
.overflowed {
  position: absolute;
}

FIDDLE http://jsfiddle.net/vLsmmrz6/

Answer 7

Answer №4

For a solution, consider this example:

<div id="textChange" style="overflow:hidden; padding-left:250px;">This is wrapper Div
This is wrapper Div<br/>
This is wrapper Div<br/>
<div id="textChange1" style="position:absolute;left:50; top: 50;">
This is inner div but extend 200px to the left<br/>
This is inner div but extend 200px to the left<br/>
This is inner div but extend 200px to the left<br/>
This is inner div but extend 200px to the left<br/>
This is inner div but extend 200px to the left<br/>
</div>
This is wrapper Div<br/>
This is wrapper Div<br/>
This is wrapper Div<br/>
</div>

You could try implementing this and see if it resolves your issue.

Give it a shot and check if it works for you.

Answer 8

For a solution, consider this example:

<div id="textChange" style="overflow:hidden; padding-left:250px;">This is wrapper Div
This is wrapper Div<br/>
This is wrapper Div<br/>
<div id="textChange1" style="position:absolute;left:50; top: 50;">
This is inner div but extend 200px to the left<br/>
This is inner div but extend 200px to the left<br/>
This is inner div but extend 200px to the left<br/>
This is inner div but extend 200px to the left<br/>
This is inner div but extend 200px to the left<br/>
</div>
This is wrapper Div<br/>
This is wrapper Div<br/>
This is wrapper Div<br/>
</div>

You could try implementing this and see if it resolves your issue.

Give it a shot and check if it works for you.

Answer 9

Answer №5

If you're looking for a solution that doesn't rely on Javascript or moving elements around, here's a simple fix. All you need to do is add a parent wrapper with the same width and height as your existing #wrapper.

<div id="parent_wrapper" style="width:200px">
  <div id="wrapper" style="position: absolute; overflow: hidden; height: 100%; width: 300px;">
    <div id="test" style="position: absolute; margin-left:200px;">Test</div>
  </div>
</div>

For a visual example, check out this live demo: http://jsfiddle.net/ovjdqj4o/

Answer 10

If you're looking for a solution that doesn't rely on Javascript or moving elements around, here's a simple fix. All you need to do is add a parent wrapper with the same width and height as your existing #wrapper.

<div id="parent_wrapper" style="width:200px">
  <div id="wrapper" style="position: absolute; overflow: hidden; height: 100%; width: 300px;">
    <div id="test" style="position: absolute; margin-left:200px;">Test</div>
  </div>
</div>

For a visual example, check out this live demo: http://jsfiddle.net/ovjdqj4o/

Expanding a position absolute container beyond a overflow-hidden container

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Is it considered best practice to utilize iframes for the implementation of a header or navbar on a

Managing the Response from Google Geocode API in a Vue JS Component

Should we consider using extra url query parameters as a legitimate method to avoid caching or enforce the updating of css/js files?

Ensuring the alignment of the vertical centers of icons and text within the .row class

Utilizing jQuery to establish various AJAX requests through functions on page load and button click

Is there a way to utilize the passValue function twice within Javascript?

Trouble with placing an absolutely positioned element using Tailwindcss

Navigation bar stays concealed on mobile devices until manually dragged down with a touch

Highcharts' labels on the x-axis do not automatically rotate

Tips on optimizing a setTimeout script for seamless integration with an HTML form

Locating content inside a span element with tags and spacing in jquery

Effortless pagination across various pages, utilizing diverse CSS selectors

Django static files reference

Retrieving Text from CSS Property with Selenium in Python

Is there a way to dynamically adjust the height of a DIV block?

Tips for effectively showcasing dynamic data retrieved from a database

Equal dimensions for all cards in the TailwindCSS gallery display

What is the process for triggering a PHP function when a form element is clicked in a webpage?

What's the best way to target an element that is outside a certain parent container, but based on the parent's class?

Arrangement of box and buttons on R shiny interface