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

Tips for generating dynamic rows and storing them in a database

Getting the value of a CSS variable under <script> in Vue.js

The ng-controller (dropdown menu) is functioning properly when tested locally and on JSFiddle, however, it is not working on

Explore by the anchor tag

Dynamically Loading External JavaScript Files Depending on User Input

Rearrange items in a display: contents wrapper using CSS Grid

Using an aria-label attribute on an <option> tag within a dropdown menu may result in a DAP violation

What is the reason behind a taller button when using a single line span?

The property 'scrollHeight' is undefined and cannot be read

Exploring CSS shaders in a browser?

Changing the appearance of a shadow root element using CSS styling

Show a div once all its content has been fully loaded

React - A guide on accessing the scroll position of a div using JavaScript

The code encountered an error because it was unable to access the property 'style' of an undefined element on line 13 of the script

Off-center alignment in left margin with Bootstrap 3

Using ORDER BY RAND() on Internet Explorer consistently returns the same row

Saving the order of elements dropped in jQuery UI Droppable into an input field

The margin-right and margin-left properties function differently when it comes to dealing with overflow of floated divs

Enhancing URLs with jQuery/AJAX: A Comprehensive Guide to Adding Parameters

JavaScript: create a button that dynamically changes size and color when scrolling