Odpowiedziałem na podobne pytanie tutaj .

Zobacz również to jsFiddle dla demo, chociaż dodałem tylko prefiksy WebKit, więc otwórz w Chrome.

1. uzyskanie dziecka elementu flex do wypełnienia wysokości 100%

• Ustaw position: relative; na rodzicu dziecka.
• Ustaw position: absolute; Na dziecku.
• następnie możesz ustawić szerokość / wysokość zgodnie z wymaganiami (100% w mojej próbce).

1. Zmiana rozmiaru przewijania "quirk" w Chrome

• Umieść overflow-y: auto; na przewijanym div.
• przewijalny div musi mieć wyraźnie określoną wysokość. Moja próbka ma już wysokość 100% , ale jeśli żadna nie jest już zastosowana, możesz określić height: 0;

Zobacz ta ODPOWIEDŹ aby uzyskać więcej informacji na temat kwestii przewijania.

Jeśli dobrze rozumiem, chcesz, aby flex-2-child wypełnił wysokość i szerokość swojego rodzica, aby czerwony obszar był w pełni pokryty zielonym?

Jeśli tak, wystarczy ustawić flex-2, aby używać Flexbox:

.flex-2 {
    display: flex;
}

Następnie powiedz flex-2-child, aby stał się elastyczny:

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

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

Powodem jest to, że flex-2-child nie jest elementem Flexbox, ale jego rodzicem.

Przypuszczam, że zachowanie Chrome jest bardziej zgodne ze specyfikacją CSS (choć jest mniej intuicyjne). Zgodnie ze specyfikacją Flexbox, domyślna wartość stretch właściwości align-self zmienia tylko użytą wartość właściwości "cross size" elementu (height, w tym przypadku). I, jak rozumiem specyfikacji CSS 2.1, wysokość procentowa jest obliczana na podstawie podanej wartości rodzica height, a nie jego użytej wartości. Na wartość rodzica height nie ma wpływu na właściwości flex i nadal wynosi auto.

Ustawienie jawnego height: 100%sprawia, że formalnie można obliczyć procentową wysokość dziecka, podobnie jak ustawienie height: 100% na html pozwala obliczyć procentową wysokość body W CSS 2.1.

Znalazłem rozwiązanie sam. Załóżmy, że masz CSS poniżej:

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

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

W tym przypadku ustawienie wysokości 100% nie zadziała, więc ustawiłem margin-bottom regułę na auto, Jak:

.child {
  margin-bottom: auto;
}

I dziecko będzie wyrównane do najwyższego poziomu rodzica.

Możesz również użyć reguły align-self jeśli wolisz:

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

Pomysł byłby taki, że display:flex; z flex-direction: row; wypełnia container div z .flex-1 i .flex-2, ale to nie znaczy, że .flex-2 ma domyślne height:100%;, nawet jeśli jest przedłużony do pełnej wysokości.

I aby mieć element potomny (.flex-2-child) z height:100%;, musisz ustawić rodzica na height:100%; lub użyć display:flex; z flex-direction: row; w div .flex-2.

Z tego co wiem, display:flex nie zwiększy wysokości wszystkich elementów Twojego dziecka do 100%.

Małe demo, usunęło wysokość z .flex-2-child i użyło display:flex; na .flex-2: http://jsfiddle.net/2ZDuE/3/

Można to również rozwiązać za pomocą align-self: stretch; na elemencie, który chcemy rozciągnąć.

Czasami pożądane jest rozciągnięcie tylko jednego elementu w konfiguracji 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 {
    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>

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

Ciekawostka: wysokość-100% działa w najnowszym chrome; ale nie w safari;

Więc rozwiązanie w tailwind byłoby

"elementy flex-stretch"

Https://tailwindcss.com/docs/align-items

I być stosowane rekurencyjnie do dziecka dziecka ...

.Pojemnik { . . . . / align = "left" / ; . . . . }

To jest moje rozwiązanie przy użyciu css + .

Po pierwsze, jeśli pierwsze dziecko (flex-1) powinno mieć 100px, to nie powinno być flex.

W css + w rzeczywistości możesz ustawić elastyczne i / lub statyczne elementy (kolumny lub wiersze), a twój przykład stanie się tak prosty jak ten:

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

Kontener CSS:

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

I oczywiście zawierać css + 0.2 core .

Oto skrzypce .