如何让Div自适应子元素高度？响应式圆环溢出Div问题求解

看起来你遇到的核心问题是父容器#circlediv的高度没有跟着响应式圆环的尺寸动态调整，导致超大屏幕下圆环溢出。我来给你几个靠谱的解决方案：

先搞清楚问题根源 #

你之前用display: inline-block没生效，大概率是因为你的圆环元素（.kruh）可能用了绝对定位（毕竟父容器是position: relative），或者没有正确设置保持圆形的宽高比例——这两种情况都会让父容器无法感知到圆环的高度，导致高度塌陷或不匹配。

方案1：用Flexbox让父容器自动适配高度（推荐） #

如果你的圆环是需要正常排列（比如并排、小屏幕换行），用Flexbox布局可以让父容器自动撑开高度，完美匹配圆环的尺寸：

修改父容器样式 #

#circlediv {
  position: relative;
  width: 100%;
  display: flex; /* 替换inline-block为flex */
  flex-wrap: wrap; /* 窗口变小时圆环自动换行 */
  gap: 12px; /* 可选：给圆环之间加间距，避免挤在一起 */
  border: 1px solid black;
}

圆环样式（保证响应式圆形） #

.kruh {
  width: calc(25% - 9px); /* 四个圆环并排，减去gap的影响 */
  aspect-ratio: 1 / 1; /* 关键！强制宽高1:1，始终保持圆形 */
  border-radius: 50%; /* 把方块变成圆形 */
  background-color: #e0e0e0; /* 示例背景色，可替换 */
}

这样调整后，父容器#circlediv的高度会完全跟着圆环的高度走，窗口无论怎么缩放，圆环都不会溢出容器。

方案2：如果圆环是绝对定位布局 #

要是你用绝对定位来摆放四个圆环（比如四个角各放一个），那父容器需要强制宽高一致，确保高度足够容纳圆环：

父容器样式 #

#circlediv {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1; /* 让容器宽高始终相等，和圆环直径匹配 */
  border: 1px solid black;
}

圆环样式 #

.kruh {
  position: absolute;
  width: 25%; /* 圆环直径是父容器宽度的25% */
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-color: #e0e0e0;
}

/* 给四个圆环定位到角落 */
#circle1 { top: 0; left: 0; }
#circle2 { top: 0; right: 0; }
#circle3 { bottom: 0; left: 0; }
#circle4 { bottom: 0; right: 0; }

这个方案里，父容器的高度始终等于自身宽度，圆环的尺寸基于父容器宽度，所以永远不会溢出。

为什么display: inline-block没用？ #

inline-block只会让容器适应内部正常流元素的高度，如果你的圆环是绝对定位（脱离文档流），或者用padding-top这类方式做圆形（自身高度为0），父容器就无法获取到正确的高度，自然会出现溢出问题。

内容的提问来源于stack exchange，提问作者Jakub Menšík