Início / coding / Perguntas / 79439651
Accepted
Adrian
Asked: 2025-02-14 22:18:25 +0800 CST

Por que ter um wrapper extra com flex de exibição altera o comportamento da porcentagem de altura? [duplicado]

  • 772

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

1 respostas

  1. Best Answer

    Primeiro exemplo (sem wrapper extra)

    O div verde com height: '100%'é definido para ter a mesma altura com seu bloco de contenção, que é o div pai com display: 'flex'. No entanto, a altura do div pai é indefinida, então ele height: '100%'se comportará como height: 'auto'. E não há conteúdo no div verde, então ele terá altura zero.

    Padrões CSS W3C: altura - porcentagem

    A porcentagem é calculada com relação à altura do bloco de contenção da caixa gerada. Se a altura do bloco de contenção não for especificada explicitamente (ou seja, depende da altura do conteúdo), e esse elemento não estiver absolutamente posicionado, o valor será computado como 'auto'.

    Padrões CSS W3C: bloco de contenção

    Padrões CSS W3C: tamanho definido e indefinido

    Segundo exemplo (com wrapper extra. Ambos com display flex)

    O bloco que contém o div verde ainda é seu div pai com display: 'flex', também o wrapper extra. Aqui está uma diferença, o wrapper tem um pai com display: 'flex', o que significa que o wrapper é um item flex agora . De acordo com o algoritmo de layout flex, o tamanho do wrapper será considerado definido . Agora 100% será efetivo, faça o div verde ter a mesma altura do wrapper.

    Descarte alguns detalhes, o procedimento de layout é assim:

    1. Determinar a altura dos avós depende dos filhos deles.
    2. Determinar a altura do wrapper depende dos seus filhos.
    3. Colete todos os itens e encontre a maior altura.
      1. Vermelho tem altura 25px.
      2. O verde tem height: '100%', mas a altura do bloco que o contém é indefinida agora, então trate como height: 'auto', o que dá altura de conteúdo 0 + borda * 2. O verde tem altura 4px.
      3. Azul tem altura 50px.
      4. O maior é 50px.
    4. A altura do invólucro é determinada como 50px.
    5. A altura dos avós é determinada como 50px. Então as alturas dos seus filhos são definidas como 50pxe definidas.
    6. Refazer o layout do conteúdo do wrapper.
      1. Vermelho e Azul ainda estão definidos para serem 25pxe 50px.
      2. A altura do Green agora é calculada como 100% da altura definida do seu pai, 50px. A altura total será adicionada border * 2, 54px.
    7. Refazer layout de conteúdo do Vermelho, Verde e Azul, nada a fazer.

    Padrões CSS W3C: algoritmo de layout flexível - Tamanhos Definidos

    Depois que o tamanho transversal de uma linha flexível for determinado, os itens em contêineres flexíveis de tamanho automático também serão considerados definitivos para fins de layout; consulte a etapa 11.

    Padrões CSS W3C: algoritmo de layout flexível - Determinação de tamanho cruzado

    Se o item flexível tiver align-self: stretch, refaça o layout do seu conteúdo, tratando esse tamanho usado como seu tamanho de cruz definido para que os filhos de tamanho percentual possam ser resolvidos.

    Terceiro exemplo (com invólucro extra. Apenas o avô com flex de exibição)

    O procedimento é similar ao segundo exemplo. As diferenças estão em negrito e itálico.

    1. Determinar a altura dos avós depende dos filhos deles.
    2. Determinar a altura do wrapper depende dos seus filhos.
    3. Calcular a altura total do conteúdo.
      1. Vermelho tem altura 25px.
      2. O verde tem height: '100%', mas a altura do bloco que o contém é indefinida agora, então trate como height: 'auto', o que dá altura de conteúdo 0 + borda * 2. O verde tem altura 4px.
      3. Azul tem altura 50px.
      4. O total é 25px + 4px + 50px = 79px.
    4. A altura do invólucro é determinada como 79px.
    5. A altura dos avós é determinada como 79px. Então as alturas dos seus filhos são definidas como 79pxe definidas.
    6. Refazer o layout do conteúdo do wrapper.
      1. Vermelho e Azul ainda estão definidos para serem 25pxe 50px.
      2. A altura do Green agora é calculada como 100% da altura definida do seu pai, 79px. A altura total será adicionada border * 2, 83px.
    7. Refazer layout de conteúdo do Vermelho, Verde e Azul, nada a fazer.

    POR FALAR NISSO

    1. Prefiro definir box-sizing: 'border-box'para evitar o incômodo de adicionar largura de linha de borda.
    2. Se você quiser alinhar os três itens, remova heightdo verde do primeiro exemplo. O Flex Layout tem align-items: stretchpor padrão, o que esticará a altura do verde para alinhar o mais alto em sua linha cruzada. Caso contrário, a altura explícita substituirá o alongamento.
    • 1

relate perguntas