Como posso tornar os filhos do Flexbox com 100% de altura dos pais?

Estou tentando preencher o espaço vertical de um item flexível dentro de um Flexbox.

.container {
  height: 200px;
  width: 500px;
  display: flex;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  flex: 1;
  background-color: red;
}
.flex-2-child {
  height: 100%;
  width: 100%;
  background-color: green;
}

<div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="flex-2-child"></div>
  </div>
</div>

E aqui está o JSFiddle

flex-2-child não preenche a altura necessária, exceto nos dois casos em que:

1. flex-2 tem uma altura de 100% (o que é estranho, porque um item flexível tem 100% por padrão + é defeituoso no Chrome)
2. flex-2-child tem uma posição absoluta que também é inconveniente

No momento, isso não funciona no Chrome ou Firefox.

Usar align-items: stretch

Semelhante à resposta de David Storey, minha solução alternativa é:

.flex-2 {
    display: flex;
    align-items: stretch;
}

Como alternativa align-items, você pode usar align-selfapenas o .flex-2-childitem que deseja esticar.

Eu respondi uma pergunta semelhante aqui .

Eu sei que você já disse que position: absolute;é inconveniente, mas funciona. Veja abaixo mais informações sobre como corrigir o problema de redimensionamento.

Veja também este jsFiddle para obter uma demonstração, embora eu tenha adicionado apenas prefixos de kit da web tão abertos no Chrome.

Você basicamente tem 2 questões que tratarei separadamente.

1. Conseguir que o filho de um item flexível preencha a altura 100%
   • Defina position: relative;no pai da criança.
   • Situado position: absolute;na criança.
   • Você pode definir a largura / altura conforme necessário (100% na minha amostra).
2. Corrigindo a rolagem de redimensionamento "peculiaridade" no Chrome
   • Coloque overflow-y: auto;a div rolável.
   • A div rolável deve ter uma altura explícita especificada. Minha amostra já tem altura 100%, mas se nenhuma já estiver aplicada, você pode especificarheight: 0;

Consulte esta resposta para obter mais informações sobre a questão da rolagem.

Se bem entendi, você deseja que o flex-2-child preencha a altura e a largura de seu pai, para que a área vermelha seja totalmente coberta pelo verde?

Nesse caso, você só precisa configurar o flex-2 para usar o flexbox:

.flex-2 {
    display: flex;  
}

Em seguida, diga ao flex-2-child para se tornar flexível:

.flex-2-child {    
    flex: 1;
}

Veja http://jsfiddle.net/2ZDuE/10/

O motivo é que flex-2-child não é um item do flexbox, mas seu pai é.

Suponho que o comportamento do Chrome seja mais consistente com a especificação CSS (embora seja menos intuitivo). De acordo com as especificações do Flexbox, o stretchvalor padrão da align-selfpropriedade altera apenas o valor usado da "propriedade de tamanho cruzado" do elemento ( heightneste caso). E, como eu entendo a especificação CSS2.1 , as alturas de porcentagem são calculadas a partir do valor especificado do pai height, não do valor usado. O valor especificado dos pais heightnão é afetado por nenhuma propriedade flex e ainda é auto.

Definir explícito height: 100%torna formalmente possível calcular a altura percentual da criança, assim como definir height: 100%para htmltorna possível calcular a altura percentual bodyno CSS2.1.

Encontrei a solução sozinho, suponha que você tenha o CSS abaixo:

.parent {
  align-items: center;
  display: flex;
  justify-content: center;
}

.child {
  height: 100%; <- didn't work
}

Nesse caso, definir a altura 100% não funcionará; portanto, o que faço é definir a margin-bottomregra para auto, como:

.child {
  margin-bottom: auto;
}

e o filho estiver alinhado com a parte superior do pai, você também pode usar a align-selfregra de qualquer maneira, se preferir.

.child {
  align-self: flex-start;
}

Uma idéia seria que display:flex;com flex-direction: row;está preenchendo a containerdiv com .flex-1e.flex-2 , mas isso não significa que ela .flex-2tenha um padrão, height:100%;mesmo que ela seja estendida até a altura máxima e tenha um elemento filho ( .flex-2-child) com o height:100%;qual você precisará definir o pai height:100%;ou usar display:flex;com flex-direction: row;no .flex-2div também.

Pelo que sei display:flex, não estenderá a altura de todos os elementos filhos para 100%.

Uma pequena demonstração, removida a altura .flex-2-childe usada display:flex;em.flex-2 : http://jsfiddle.net/2ZDuE/3/

html

<div class="container">
    <div class="flex-1"></div>
    <div class="flex-2">
        <div class="flex-2-child"></div>
    </div>
</div>

css

.container {
    height: 200px;
    width: 500px;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}
.flex-1 {
   flex:1 0 100px;
    background-color: blue;
}
.flex-2 {
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1 0 100%;
    background-color: red;
}
.flex-2-child {
    flex: 1 0 100%;
    height:100%;
    background-color: green;
}

http://jsfiddle.net/2ZDuE/750/

Isso também pode ser resolvido com align-self: stretch;o elemento que queremos ser esticado.

Às vezes, é desejável esticar apenas um item em uma configuração do flexbox.

.container {
  height: 200px;
  width: 500px;
  display: flex;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  flex: 1;
  align-self: stretch;
  background-color: red;
}
.flex-2-child {
  background-color: green;
}

<div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="flex-2-child"></div>
  </div>
</div>

.container {. . . . alinhar itens: alongar; . . . . }

Esta é a minha solução usando css +

Antes de tudo, se o primeiro filho (flex-1) deve ter 100px, não deve ser flex. De fato, no css + você pode definir elementos flexíveis e / ou estáticos (colunas ou linhas) e seu exemplo se torna tão fácil quanto isto:

<div class="container">
  <div class="EXTENDER">
    <div class="COLS">
      <div class="CELL _100px" style="background-color:blue">100px</div>
      <div class="CELL _FLEX" style="background-color:red">flex</div>
    </div>
  </div>
</div>

CSS do contêiner:

.container {
    height: 200px;
    width: 500px;
    position:relative;
}

e obviamente inclui css + 0.2 core

ouvir o violino