CSS：具有重叠子div的父div - 无法获得父权限

Question

I'm trying to eliminate the extra space in the #middle-panel underneath the .box-label text, but I need to maintain the functionality of the #middle-panel expanding when I get to smaller screen sizes and the text becomes stacked. But if I set a specific height on the #middle-panel to eliminate the extra space, it no longer expands to accommodate the stacked type.

This fiddle shows my current implementation: Current Fiddle

If, in the fiddle, you add height: 65px; to the #middle-panel-inner-div , you will see the desired amount of space below the text. Unfortunately, if you then change the width: of the .red-box-and-label class from 25% to 20% (to represent what will happen at smaller screen sizes), you will see the text becomes stacked, but the #middle-panel doesn't expand to accommodate it. Delete the just-added height: 65px; and you will see that the #middle-panel has now expanded to accommodate the text, but once again with too much space on the bottom.

I've tried some solutions, such as: Div overlapping & wrong height but none of them seem to work.

Any suggestions would be greatly appreciated!

Answer 1

This thing is happens because height is auto and parent div expand height depend on child div. So it takes it's child div height. Even though you give negative top value.

The solution of this issue is, remove negative top value and give margin-top to .red-box-and-label

Remove top: -30px; from #middle-panel-inner-div . And:

.red-box-and-label {
    margin: -30px 0 0;
    padding: 0;
    width: 25%;
}

Updated Working Fiddle

Answer 2

Normally you'd need an inner wrapper for the #middle-panel-inner-div with a negative bottom-margin to compensate for the 30px you moved the boxes up with. But if you place it, you'd have to move all the flex properties from #middle-panel-inner-div to the inner wrapper. So it's easier to just make an outer wrapper for it, move the top:-30px; position:relative top:-30px; position:relative to it and add the margin-bottom: -30px to #middle-panel-inner-div .

Here's your updated fiddle .

Notice the change in markup and the relevant CSS code:

.aWrapper {
  top: -30px;
  position: relative;
}
#middle-panel-inner-div {
  /* top: -30px */
  /* position: relative */
  margin: 0 auto -30px;
}