Jak sprawić, by Flexbox dzieci miały 100% wzrostu swoich rodziców?

Próbuję wypełnić pionową przestrzeń elementu Flex w 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>

A oto JSFiddle

flex-2-child nie wypełnia wymaganej wysokości, z wyjątkiem dwóch przypadków, w których:

1. flex-2 ma wysokość 100% (co jest dziwne, ponieważ element elastyczny ma domyślnie 100% + jest wadliwy w Chrome)
2. flex-2-child ma pozycję absolutną, co również jest niewygodne

To obecnie nie działa w Chrome ani Firefox.

Posługiwać się align-items: stretch

Podobnie do odpowiedzi Davida Storeya, moje obejście:

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

Alternatywnie align-itemsmożesz użyć align-selftylko .flex-2-childprzedmiotu, który chcesz rozciągnąć.

Odpowiedziałem na podobne pytanie tutaj .

Wiem, że już powiedziałeś, że position: absolute;jest niewygodny, ale działa. Poniżej znajdują się dalsze informacje dotyczące rozwiązywania problemu zmiany rozmiaru.

Zobacz także jsFiddle, aby zobaczyć wersję demonstracyjną, chociaż dodałem tylko prefiksy webkit, które są tak otwarte w Chrome.

Zasadniczo masz 2 problemy, z którymi osobno się zajmę.

1. Sprawienie, by dziecko elementu elastycznego wypełniło się na 100%
   • Ustaw position: relative;na rodzic dziecka.
   • Ustaw position: absolute;na dziecko.
   • Następnie możesz ustawić szerokość / wysokość zgodnie z wymaganiami (100% w mojej próbce).
2. Naprawianie przewijania „dziwactwa” w Chrome
   • Załóż overflow-y: auto;przewijalny div.
   • Przewijalny div musi mieć określoną wyraźną wysokość. Moja próbka ma już wysokość 100%, ale jeśli nie została jeszcze zastosowana, możesz ją określićheight: 0;

Zobacz tę odpowiedź, aby uzyskać więcej informacji na temat przewijania.

Jeśli dobrze rozumiem, chcesz, aby flex-2-child wypełnił wysokość i szerokość swojego elementu nadrzędnego, 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 jest.

Przypuszczam, że zachowanie Chrome jest bardziej zgodne ze specyfikacją CSS (choć jest mniej intuicyjne). Zgodnie ze specyfikacją Flexbox domyślna stretchwartość align-selfwłaściwości zmienia tylko wartość użytą „właściwości cross size” elementu ( heightw tym przypadku). I, jak rozumiem specyfikację CSS2.1 , wysokości procentowe są obliczane na podstawie określonej wartości wartości nadrzędnej height, a nie jej wartości użytej. Na określoną wartość rodzica heightnie mają wpływu żadne właściwości flex i nadal jest auto.

Ustawienie wyraźnych height: 100%sprawia, że formalnie można obliczyć wysokość procentową dziecka, podobnie jak ustawienie height: 100%do htmlpozwala obliczyć wysokość procentową bodyw CSS2.1.

Znalazłem rozwiązanie samodzielnie, załóżmy, że masz CSS poniżej:

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

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

W takim przypadku ustawienie wysokości 100% nie będzie działać, więc ustawiam margin-bottomregułę na autoprzykład:

.child {
  margin-bottom: auto;
}

a dziecko zostanie wyrównane do najwyższego z rodziców, możesz także użyć align-selfreguły, jeśli wolisz.

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

Pomysł polegałby na tym, że display:flex;z flex-direction: row;jest wypełnianiem containerdiv za pomocą .flex-1i .flex-2, ale to nie znaczy, że .flex-2ma wartość domyślną, height:100%;nawet jeśli jest rozciągnięta do pełnej wysokości i aby mieć element potomny ( .flex-2-child) z height:100%;, musisz ustawić nadrzędnego height:100%;lub użyć display:flex;z flex-direction: row;na .flex-2div też.

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

Małe demo, usunięto wysokość .flex-2-childi zastosowano display:flex;na .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/

Można to również rozwiązać za align-self: stretch;pomocą elementu, 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>

.pojemnik { . . . . wyrównaj elementy: odcinek; . . . . }

To jest moje rozwiązanie za pomocą css +

Przede wszystkim, jeśli pierwsze dziecko (flex-1) powinno mieć 100 pikseli, 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:

<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 obejmują rdzeń css + 0,2

usłyszeć skrzypce