如何让父子div实现响应式同高，使容器完美包裹内部文本内容

问题根源 #

• 父容器#graybox5设置了固定最低高度min-height: 375px，内部文本高度小于该值时就会产生多余空白
• 子容器#outlinebox5使用绝对定位脱离了文档流，父容器无法感知其内容高度，无法被内容自适应撑开

修正代码 #

CSS部分 #

#graybox5 {
  /* 减去左右margin宽度避免横向溢出 */
  width: calc(100% - 40px);
  position: relative;
  background-color: #F6F6F6;
  margin: 20px;
  /* 预留左上10px空间，匹配原设计的描边偏移效果 */
  padding: 10px 0 0 10px;
  box-sizing: border-box;
}
#outlinebox5 {
  width: 100%;
  border: 1px solid #252527;
  z-index: 10;
  /* 高度由内部内容自动撑开 */
  height: auto;
}

HTML部分 #

无需修改，保留原有结构即可。

效果说明 #

修改后两个容器的高度会完全跟随内部文本高度自适应，没有多余空白，同时完全保留原设计里描边框相对灰色背景左上偏移的视觉效果。

内容的提问来源于stack exchange，提问作者kelly feger