Início / user-5744858

Adrian's questions

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

Gostaria de entender por que a div verde com borda ciano se comporta dessa maneira nesses casos.

Sem embalagem extra:

.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>

Resultado: a div verde tem altura zero em vez da altura da azul.

Com invólucro extra. Ambos com display flex:

.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>

Resultado: a div verde tem a altura da azul, como esperado.

Com invólucro extra. Apenas o avô com display flex:

.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>

Resultado: a div verde tem altura azul + vermelha + (borda ciano * 2), como esperado.

Por que preciso adicionar um wrapper com display flex para que a porcentagem de altura funcione da maneira que espero?

EDITAR

Fazendo alguns ajustes, descobri algo. No primeiro exemplo, remover height: 100%(ou definir como auto) faz com que ele cresça. Por que é que quando o div verde tem altura auto ele pega toda a altura do pai (menos sua própria borda), mas não quando é definido como 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