CSS：父项 div 与子项 div 重叠 - 无法获得正确的父项高度

Question

我正在尝试消除 #middle-panel 中 .box-label[=51 下方的多余 space =] 文本，但我需要保持 #middle-panel 扩展的功能，当我的屏幕尺寸变小并且文本变得堆叠时。但是如果我在 #middle-panel 上设置一个特定的高度来消除额外的 space，它不再扩展以容纳堆叠类型。

这个 fiddle 显示了我当前的实现： Current Fiddle

如果在 fiddle 中添加 height: 65px; 到 #middle-panel-inner-div，您将在文本下方看到所需数量的 space。不幸的是，如果您随后将 width: 的 .red-box-and-label class 从 25% 更改为 20% （以表示在较小的屏幕尺寸下会发生什么），您会看到文本堆叠在一起，但 #middle-panel 不会扩展以容纳它。删除刚刚添加的 height: 65px; ，您会看到 #middle-panel 现在已扩展以容纳文本，但是底部再次有太多 space。

我尝试了一些解决方案，例如：Div overlapping & wrong height 但其中 none 似乎有效。

如有任何建议，我们将不胜感激！

Answer 1

发生这种情况是因为高度是 auto 并且 parent div 扩展高度取决于 child div。所以它需要 child div 高度。即使你给出负 top 值。

这个问题的解决方案是，删除负 top 值并将 margin-top 赋给 .red-box-and-label

从 #middle-panel-inner-div 中删除 top: -30px;。并且：

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

Updated Working Fiddle

Answer 2

通常情况下，您需要为 #middle-panel-inner-div 加上负数 bottom-margin 的内包装，以补偿您将盒子向上移动的 30px。但是如果放置它，则必须将所有 flex 属性从 #middle-panel-inner-div 移动到内部包装器。因此，为它制作一个外包装更容易，将 top:-30px; position:relative 移到它并将 margin-bottom: -30px 添加到 #middle-panel-inner-div。

这是你的updated fiddle。

注意标记和相关 CSS 代码的变化：

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

CSS：父项 div 与子项 div 重叠 - 无法获得正确的父项高度

CSS: Parent div with overlapping child div - can't get parent height right

html

css

flexbox