how does the div parent automatically take on its size?-CodePudding

why do parents or siblings have a certain size, even though it is not set? I have the next snippet At the top I have 2 div brothers. I set the size of the blue one, why does the red one have that size?

At the bottom I have 2 geometric shapes that are in the same container, why does the container have that size?

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.box1 {
  background: red;
}

.box2 {
  background: blue;
  width: 200px;
  height: 200px;
}

.container {
  background: brown;
}

.child1 {
  width: 160px;
  height: 160px;
  background: yellow;
  transform: translate(100px, 100px);
}

.child2 {
  width: 300px;
  height: 300px;
  background: green;
  border-radius: 200px;
  transform: translateX(100px);
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <link href="teststyle.css" rel="stylesheet">
  <title></title>
</head>

<body>
  <div class="box1">
    <div class="box2"> </div>
  </div>

  <div class="container">
    <div class="child1"></div>
    <div class="child2"></div>
  </div>

</body>

</html>

CodePudding user response：

Div have a default style "display: block" which will start on a new line and take up the whole width (you can read about display here)

So, box1 width would be 100% its parents' width and its height is the height of box2. It is similar for the container case.