The parent container is being pushed down due to margin-top, despite the use of overflow:hidden

After adding a margin-top to one of my nested divs, the surrounding divs are being pushed down unexpectedly. I have searched for solutions on various forums and tried suggestions such as using overflow:hidden/auto, adding a border, or applying a margin/padding of 1px, but none of them seem to be resolving the issue. This is the current structure:

.added-margin {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
}

.div-three {
  display: flex;
  flex-wrap: wrap;
  margin-right: 0;
  margin-left: 0;
}
<div class="div-one">
  <div class="div-two">
    <div class="div-three">
      <div class="other-div"></div>
      <div class="added-margin">This div has a margin of 50px and contains other nested divs</div>
    </div>
  </div>
</div>

htmlcss

Answer №1

Excess content will trigger a consideration when the 'div' height exceeds expectations

.added-padding {
    display: flex;
    flex-direction: column;
    padding-top: 30px;
}

.div-four {
    display: flex;
    flex-wrap: wrap;
    margin-right: 0;
    margin-left: 0;

    height : 40px;
    overflow:auto;
}
<div class="div-one">
    <div class="div-two">
        <div class="div-three">
            <div class="other-div"></div>
            <div class="added-margin">This contains extra padding of 30px and multiple other divs</div>
        </div>
    </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Compatibility of HTML5 websites with Internet Explorer

Following a tutorial on HTML5/CSS3, I meticulously followed each step to create a basic website. While the demo of the site worked perfectly in Internet Explorer 8 during the tutorial, my own version did not display correctly when viewed in IE8. I discove ...

javascripthtmlcsscross-browserhtml5shiv

Utilizing Webpack to emulate the @apply functionality of Tailwind CSS and shift away from using @extend in SASS

I am currently developing an internal CSS 'framework' / methodology that falls somewhere in between ITCSS and Tailwind. We heavily rely on utility classes, but sometimes the length of the actual class name becomes too much and we feel the need t ...

csswebpacksasstailwind-css

What is the best way to utilize CSS relative positioning for aligning two rows of information on a webpage?

What is the best way to use relative positioning to show two lines of information on an image without the order of information interfering with each other? I want the Files badge to appear at the bottom of the image, with the MusicBrainz and Discogs badge ...

htmlcssbootstrap-4

Building a Dynamic Checkbox Validation Feature in Angular Using Data retrieved from an API

Currently, I have a function that retrieves and displays a list obtained from an API: displayEventTicketDetails() { this.Service .getEventTicketDetails().subscribe((data: any) => { this.eventTicketDetails = data.map(ticket => ticket. ...

javascripthtmlangulartypescript

Eliminate entry upon checkbox completion from task schedule

Currently working on developing my own to-do list web application. I have set everything up except for one thing. I am trying to figure out how to remove a checkbox from the array when it is checked. Can someone please assist me in achieving this using DOM ...

javascripthtmlnode.jsexpressejs

mismatch between margin-left and auto not aligning

Having trouble with margin-left: auto not working 1- Looking to create a header with an image and a navbar 2- Want two unordered lists in the navbar 3- Trying to position one list on the left side and the second on the right side When I use margin-left: 8 ...

htmlcss

Tips for stopping a click from going through a fixed element to the one in the background

My website features a fixed positioned header with a search box, overlaying content below it (thanks to the higher z-index). When I click on the search box, an event handler is triggered. However, the click response also passes through the header to the ...

javascripthtmlcss

Problem with fixed element on mobile due to viewport width

I am experiencing an issue with the fixed element's width. Here is a code snippet for reference: https://codepen.io/highfield/pen/PKpXGG <body> <nav class="navbar"> <div style="position:absolute; left:20px; top:12px"> & ...

csstouchfixedhorizontal-scrolling

"Discussing the process of calling a function with parameters from a controller into a view and the steps to bind that function to a directive in

Describing the issue in the title, I present the following code snippet. JavaScript: app.controller("myCtrl", function($scope) { //this is my controller $scope.type = "type"; $scope.swapChartType = function(type) { if ( ...

htmlangularjsangularjs-directiveangularjs-controller

Is there a way to customize the background size of the selected date in the DateCalendar component of MUI?

I need assistance with modifying the background size of DateCalendar's selected date in MUI (material-UI). I attempted to adjust it by changing some CSS properties using styled(DateCalendar) as shown below. However, clicking on dates caused issues wit ...

cssreactjsmaterial-ui

Activate the file selection dialogue by using a concealed label component - Safari

I am stuck with this code: <label name="xs" id="xs" for="fileselect"> <p class="add_atach">Test</p> </label> <input type="file" id="fileselect" name="fileselect[]" multiple="multiple" style="display:none;" /> When I ke ...

htmlcsslabel

AngularJS compatibility problem detected with IE Edge mode

I am facing an issue with my AngularJS Web application when it is deployed to a higher environment and accessed through IE Edge. The browser defaults to IE 8 mode, which does not support AngularJS, causing my application to not work as expected. To try an ...

angularjshtmlasp.net-mvc-4internet-explorercross-browser

Dynamic Savings and Instant Updates

Currently, I have a form that utilizes dynamic drop downs for Country, State, and City selection. However, when a user updates the information they entered, they are redirected back to the initial screen where they must go through the process of selecting ...

javascripthtml

Navigation isn't aligning correctly on the right side

I am having trouble with my navigation menu not aligning properly to the right. <div class="logo"> <h2><i class="icon-reorder"></i> Frosty</h2> </div> <div class="nav"> <a href="#">Home</a> </div& ...

htmlcsstwitter-bootstrap

Imagine watching an image shrinking down and appearing in the center of the screen

I'm struggling with making the image smaller and centering it while keeping its original size. I'm using Bootstrap and need a solution for this issue. How can I make the image centered and shown in its original size? <div class="contain ...

htmlcsstwitter-bootstrap-3responsive-design

What might be causing Chrome to not wrap a centered column to the next line in Bootstrap 4 beta?

Utilizing bootstrap 4 beta, my goal is to center a line of text inside a column and ensure that if the text exceeds the line width, it wraps to the next line. I attempted to achieve this by using justify-content-center on the row in combination with col-a ...

htmlcsstwitter-bootstrapgoogle-chromebootstrap-4

Discover the underlying element that is being blurred when clicked

Is there a method to determine which element triggered the blur event when clicked outside? I want to update a ui-select value to match what the user typed in if they click outside of the dropdown. However, if they click on a dropdown item, I want to disc ...

javascripthtmlangularjsui-select

Creating background color animations with Jquery hover

<div class="post_each"> <h1 class="post_title">Single Room Apartments</h1> <img class="thumb" src="1.jpg"/> <img class="thumb" src="1.jpg"/> <img class="thumb" src="1.jpg"/> <img class="thumb last" ...

javascriptjqueryhtmlcss

How can I align divs horizontally within a container using CSS?

Struggling with WP 3.0.4 not showing my css styling correctly for aligning four boxes (divs) horizontally inside a container div. Interestingly, the same css rules work flawlessly on my hand-coded html/php website that uses HTML 4.01 Transitional//EN. Howe ...

csswordpressalignment

Hide a div when multiple classes are filtered using jQuery

I have several divs with the class .item. When the user clicks on the Classfilter submit button, all .item elements that also have at least one class from the dateClasses array (for example ['28.09.2015', '29.09.2015']) should be hidden ...

javascriptjqueryhtmlcss