CSS：具有重叠子div的父div - 不能使父高度正确

Question

我试图消除 id select_type table type possible_keys key key_len ref rows Extra 1 SIMPLE md_prodtypes index PRIMARY,ProdType_UNIQUE,ID_MAX_AGE ProdType_UNIQUE 4 23 Using index; Using temporary; Using filesort 1 SIMPLE d_products ref PRIMARY,ServiceID_UNIQUE,fk_Products_BaseServices1,fk_d_products_md_prodtypes1 fk_d_products_md_prodtypes1 4 combina.md_prodtypes.ProdType 8625 1 SIMPLE d_baseservices eq_ref PRIMARY,CreationDateDesc_index,CreationDate_index PRIMARY 8 combina.d_products.ServiceID 1 Using where\ 文字下方的 #middle-panel 中的额外空格，但我需要维护当我获得较小的屏幕尺寸并且文本堆叠时， .box-label 的功能会扩展。但是，如果我在 #middle-panel 上设置特定高度以消除额外空间，则不再展开以适应堆叠类型。

这个小提琴显示了我目前的实现： 的 LabeledPoint

如果在小提琴中将 #middle-panel 添加到 height: 65px; ，您会在文字下方看到所需的空间量。不幸的是，如果您将 #middle-panel-inner-div 类的 width: 从25％更改为20％（以表示在较小屏幕尺寸下会发生的情况） ），您会看到文字堆叠，但 .red-box-and-label 不会扩展以适应它。删除刚刚添加的 #middle-panel ，您会看到 height: 65px; 现已扩展为适应文字，但又一次空间太大在底部。

我尝试了一些解决方案，例如：Current Fiddle 但它们似乎都不起作用。

任何建议都将不胜感激！

Answer 1

这件事发生是因为身高是auto而父div扩展身高取决于孩子div。所以它需要它的孩子div高度。即使您给出负值top。

此问题的解决方案是，删除否定的top值并将margin-top提交给.red-box-and-label

从top: -30px;移除#middle-panel-inner-div。而且：

.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;
}