主页 / user-5744858

Adrian's questions

Martin Hope
Adrian
Asked: 2025-02-14 22:18:25 +0800 CST
  • 5

我想了解为什么带有青色边框的绿色 div 在这些情况下会有这样的行为。

无额外包装：

.wrapper {
  display: flex;
  border: solid 2px black;
}

.red {
  width: 25px;
  height: 25px;
  background-color: red;
}

.green {
  height: 100%;
  background-color: green;
  border: solid 2px cyan;
}

.blue {
  width: 50px;
  height: 50px;
  background-color: blue;
}
<div class="wrapper">
  <div class="red"></div>
  <div class="green"></div>
  <div class="blue"></div>
</div>

结果：绿色 div 的高度为零，而不是蓝色的高度。

带有额外的包装。均带有显示弹性：

.wrapper {
  display: flex;
  border: solid 2px black;
}

.red {
  width: 25px;
  height: 25px;
  background-color: red;
}

.green {
  height: 100%;
  background-color: green;
  border: solid 2px cyan;
}

.blue {
  width: 50px;
  height: 50px;
  background-color: blue;
}
<div class="wrapper">
  <div class="wrapper">
    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
  </div>
</div>

结果：正如预期的那样，绿色 div 具有蓝色的高度。

带有额外的包装。只有带有显示弹性的祖父级：

.wrapper {
  display: flex;
  border: solid 2px black;
}

.red {
  width: 25px;
  height: 25px;
  background-color: red;
}

.green {
  height: 100%;
  background-color: green;
  border: solid 2px cyan;
}

.blue {
  width: 50px;
  height: 50px;
  background-color: blue;
}
<div class="wrapper">
  <div>
    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
  </div>
</div>

结果：绿色 div 具有蓝色 + 红色 + （青色边框 * 2）的高度，与预期一致。

为什么我必须添加一个具有显示弹性的包装器才能使高度百分比按照我期望的方式工作？

编辑

经过一番修修补补，我发现了一些东西。在第一个例子中，删除height: 100%（或将其设置为自动）会使其增大。为什么当绿色 div 的高度为自动时，它会占用父级的全部高度（减去其自身的边框），而当设置为 100% 时则不会？

.wrapper {
  display: flex;
  border: solid 2px black;
}

.red {
  width: 25px;
  height: 25px;
  background-color: red;
}

.green {
  height: auto;
  background-color: green;
  border: solid 2px cyan;
}

.blue {
  width: 50px;
  height: 50px;
  background-color: blue;
}
<div class="wrapper">
  <div class="red"></div>
  <div class="green"></div>
  <div class="blue"></div>
</div>

html