如何使div成长以包含其子元素？

Question

我在一个div中有四个响应圈。但div有高度，当你在巨大的显示器上运行代码时，圆圈在div之外。我想将div的高度设置为与圆的直径相同。因此，在调整大小后，div高度将始终与圆圈相同或更大。

#circlediv {
    position:relative;
    width:100%;
    display:inline-block;
    border:1px solid black;
}

<div id="circlediv">
   <div class="kruh" id="circle1"></div>
   <div class="kruh" id="circle2"></div>
   <div class="kruh" id="circle3"></div>
   <div class="kruh" id="circle4"></div>
</div> 

我尝试了display: inline-block，但这没效果。

Answer 1

此示例使用float表示圈子，overflow: auto表示容器。从您的评论到其他答案，我不确定这是否是您想要的，但这是解决问题的一种方法。

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

.kruh {
  width: 20vw;
  height: 20vw;
  border: 1px solid #fa0;
  float: left;
  border-radius: 50%;
}

#circlediv {
  border: 1px solid black;
  width: 100%;
  overflow: auto;
}

＆＃13;

<div id="circlediv">
  <div class="kruh" id="circle1"></div>
  <div class="kruh" id="circle2"></div>
  <div class="kruh" id="circle3"></div>
  <div class="kruh" id="circle4"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以使用display: inline-flex;

来完成

.kruh {
    width:100px;
    height:100px;

    border:1px solid red;
    display:inline-flex;
    border-radius:100%;
}

#circlediv {
    border:1px solid blue;
    width:100%;
}

<div id="circlediv">
    <div class="kruh" id="circle1"></div>
    <div class="kruh" id="circle2"></div>
    <div class="kruh" id="circle3"></div>
    <div class="kruh" id="circle4"></div>
</div>

Answer 3

这是你的意思吗？

.kruh {
    width:100px;
    height:100px;

    border:1px solid red;
    display:inline-block;
    border-radius:100%;
}

#circlediv {
    border:1px solid blue;
    width:100%;
}

<div id="circlediv">
    <div class="kruh" id="circle1"></div>
    <div class="kruh" id="circle2"></div>
    <div class="kruh" id="circle3"></div>
    <div class="kruh" id="circle4"></div>
</div>