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

1, Autoriteit 100%

Gebruik align-items: stretch

Vergelijkbaar met het antwoord van David Storey, is mijn oplossing:

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

Merk op dat height: 100%moet worden verwijderd uit de kindercomponent (zie opmerkingen).

Als alternatief voor align-items, kunt u align-selfnet op de .flex-2-childItem die u wilt uitgerekt.

2, Autoriteit 62%

Ik heb een soortgelijke vraag geantwoord hier .

Ik weet dat je al hebt gezegd position: absolute;is lastig, maar het werkt. Zie hieronder voor meer informatie over het vaststellen van de wijziging van de grootte.

Zie ook deze jsFiddlevoor een demo, hoewel ik alleen WebKit-voorvoegsels heb toegevoegd openen in Chrome.

Je hebt eigenlijk twee problemen die ik apart zal behandelen.

1. Het kind van een flex-item de hoogte 100% laten vullen

• Stel position: relative;in op de ouder van het kind.
• Stel position: absolute;in op het kind.
• Je kunt vervolgens de breedte/hoogte naar wens instellen (100% in mijn voorbeeld).

2. De “quirk” bij het scrollen van formaat wijzigen in Chrome

• Zet overflow-y: auto;op de schuifbare div.
• De schuifbare div moet een expliciete hoogte hebben. Mijn monster heeft al een hoogte van 100%, maar als er al geen is toegepast, kunt u height: 0;

opgeven

Zie dit antwoordvoor meer informatie over het scrollprobleem.

Antwoord 3, autoriteit 53%

Als ik het goed begrijp, wil je dat flex-2-child de hoogte en breedte van zijn ouder vult, zodat het rode gebied volledig wordt bedekt door het groene?

Als dat zo is, hoeft u alleen maar flex-2 in te stellen om Flexbox te gebruiken:

.flex-2 {
    display: flex;
}

Vertel dan flex-2-child om flexibel te worden:

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

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

De reden is dat flex-2-child geen Flexbox-item is, maar het bovenliggende item wel.

4, Autoriteit 4%

Ik vond de oplossing alleen. Stel dat u de CSS hieronder hebt:

.parent {
  align-items: center;
  display: flex;
  justify-content: center;
}
.child {
  height: 100%; <- didn't work
}

In dit geval werkt het instellen van de hoogte 100% niet, dus ik heb de margin-bottomregel op auto, zoals:

.child {
  margin-bottom: auto;
}

en het kind zal worden uitgelijnd met de bovenste van de ouder.

U kunt ook de align-selfregel gebruiken als u verkiest:

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

5, Autoriteit 2%

Dit kan ook worden opgelost met align-self: stretch;op het element dat we willen uitgerekt.

Soms is het wenselijk om slechts één item in een Flexbox-instellingen te strekken.

.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 {
    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;
}

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

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

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