Parent div is positioned absolutely with overflow set to hidden

Question

Parent div is positioned absolutely with overflow set to hidden

I am facing a unique requirement where the parent div has an absolute position and the child div also has an absolute position. Inside the parent div, I have set overflow: hidden to hide the extra width of the child div. However, this setup is not working as expected. I understand that the parent div should ideally have a position: relative, but due to the existing structure of my code, I am unable to switch the parent's position from absolute to relative. Is there a workaround for this issue?

For reference, here is the example in a JSFiddle. The goal is to hide the light red box under the parent div so that the child div remains within the parent.

Below is the code snippet:

.wrapper {
  position: absolute;
  left: 100px;
  top: 100px;
  width: 400px;
  height: 350px;
  background: #666666;
  padding: 10px;
}
.wrapper-inner {
  position: absolute;
  width: 450px;
  height: 380px;
  background: #fecccc;
}

<div class="wrapper">
  <div class="wrapper-inner">
    Content goes here
  </div>
</div>

html css

Answer 1

Answer №1

It appears that you forgot to include overflow:hidden in the wrapper class.

.wrapper{position:absolute; left:100px; top:100px; width:400px; height:350px; background:#666666; padding:10px; overflow:hidden;}
.wrapper-inner{position:absolute; width:450px; height:380px; background:#fecccc;}

<div class="wrapper">
<div class="wrapper-inner">
    Content goes here
    </div>
</div>

Answer 2

It appears that you forgot to include overflow:hidden in the wrapper class.

.wrapper{position:absolute; left:100px; top:100px; width:400px; height:350px; background:#666666; padding:10px; overflow:hidden;}
.wrapper-inner{position:absolute; width:450px; height:380px; background:#fecccc;}

<div class="wrapper">
<div class="wrapper-inner">
    Content goes here
    </div>
</div>

Answer 3

Answer №2

Here is the code that meets your specifications:

.container {
  position: relative;
  left: 50px;
  top: 50px;
  width: 300px;
  height: 250px;
  background-color: #333333;
  padding: 15px;
  overflow: hidden;
}

Answer 4

Here is the code that meets your specifications:

.container {
  position: relative;
  left: 50px;
  top: 50px;
  width: 300px;
  height: 250px;
  background-color: #333333;
  padding: 15px;
  overflow: hidden;
}

Answer 5

Answer №3

Feel free to take a look at my code snippet

.container{position:absolute; left:100px; top:100px; width:400px; height:350px; overflow:hidden; background:#666666; padding:10px;}
.container-inner{position:relative; width:100%; height:100%; background:#fecccc; overflow-y:scroll;}

<div class="container">
<div class="container-inner">
    Content goes here Content goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here
    </div>
</div>

Answer 6

Feel free to take a look at my code snippet

.container{position:absolute; left:100px; top:100px; width:400px; height:350px; overflow:hidden; background:#666666; padding:10px;}
.container-inner{position:relative; width:100%; height:100%; background:#fecccc; overflow-y:scroll;}

<div class="container">
<div class="container-inner">
    Content goes here Content goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here
    </div>
</div>

Answer 7

Answer №4

It seems that the issue you are facing is related to the child div extending beyond the boundaries of the parent div. Even though you mentioned using overflow:hidden, it was not present in your fiddle. Adding this property to the .wrapper class should help contain the content within the parent div as per your requirement.

Answer 8

It seems that the issue you are facing is related to the child div extending beyond the boundaries of the parent div. Even though you mentioned using overflow:hidden, it was not present in your fiddle. Adding this property to the .wrapper class should help contain the content within the parent div as per your requirement.

Answer 9

Answer №5

VIEW UNIQUE DEMO

Styling in CSS

.container-inner {
  position: absolute; /* positioned relative to its parent */
  top:10px; /* taking into account a 10px padding in the parent element */
  bottom:10px;
  left:10px;
  right:10px;
  background: #fecccc;
}

Answer 10

VIEW UNIQUE DEMO

Styling in CSS

.container-inner {
  position: absolute; /* positioned relative to its parent */
  top:10px; /* taking into account a 10px padding in the parent element */
  bottom:10px;
  left:10px;
  right:10px;
  background: #fecccc;
}

Answer 11

Answer №6

It seems like you forgot to include the overflow:hidden property in the parent wrapper:

.wrapper {
  position: absolute;
  left: 100px;
  top: 100px;
  width: 400px;
  height: 350px;
  background: #666666;
  padding: 10px;
  overflow: hidden
}

.wrapper-inner {
  position: absolute;
  width: 450px;
  height: 380px;
  background: #fecccc;
}

Basically, you already had the solution to your question! :)

Answer 12

It seems like you forgot to include the overflow:hidden property in the parent wrapper:

.wrapper {
  position: absolute;
  left: 100px;
  top: 100px;
  width: 400px;
  height: 350px;
  background: #666666;
  padding: 10px;
  overflow: hidden
}

.wrapper-inner {
  position: absolute;
  width: 450px;
  height: 380px;
  background: #fecccc;
}

Basically, you already had the solution to your question! :)

Parent div is positioned absolutely with overflow set to hidden

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Maintaining aspect ratio while resizing images: A foolproof guide

Is there a way to choose columns 2 to 6 of the row that is currently selected

The Bootstrap navbar stubbornly refuses to hide after being clicked on

The Ajax request is successful on one server but fails on another

Issue with AngularJS URLs not functioning properly when using HTML5 mode

`the mobile site is not displaying properly on the screen`

Displaying a banner at the bottom of a React page

Elemental SVG Animation

What is the best method to position images in the same way as seen in the screenshot

Ensure that the text within the ng-repeat is wrapped in a span element and each

Check for the presence of a horizontal scrollbar on the page for both computer and mobile devices

Is there a way to generate a distinctive curved design using CSS for a

Using Python to retrieve data from MySQL and display it in HTML

Why does text display differently in HTML (Firefox) on Ubuntu compared to Windows 7?

Can you explain the significance of using `!important` in CSS without specifying a value?

Submitting modal form information using AJAX to PHP

Understanding JavaScript Regular Expressions

Ways to track the visit data for different languages in Google Analytics when the language is not included in the URL

Establish height and width parameters for creating a dynamic and adaptable bar chart with recharts

Tips for showcasing a complete background image in a div even if the content inside is minimal