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:
flex-2
ma wysokość 100% (co jest dziwne, ponieważ element elastyczny ma domyślnie 100% + jest wadliwy w Chrome)flex-2-child
ma pozycję absolutną, co również jest niewygodne
To obecnie nie działa w Chrome ani Firefox.
height:100%
ale zamiast tego renderują z naturalną wysokością. Dziwne jest to, że jeśli zmienię ich wysokość naauto
, to renderują tak,height:100%
jak próbowałem. To zdecydowanie nie jest intuicyjne, jeśli tak powinno działać.Odpowiedzi:
Posługiwać się
align-items: stretch
Podobnie do odpowiedzi Davida Storeya, moje obejście:
Alternatywnie
align-items
możesz użyćalign-self
tylko.flex-2-child
przedmiotu, który chcesz rozciągnąć.źródło
stretch
: to powinna być wybrana odpowiedź.height: 100%
z elementu potomnego elementu, który ma mieć taką samą wysokość jak rodzicheight: 100%
do odpowiedzi - prawie się poddałem i widziałem to tylko w ostatniej chwili przed powrotem doabsolute
- co wiąże się z różnego rodzaju problemami.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ę.
position: relative;
na rodzic dziecka.position: absolute;
na dziecko.overflow-y: auto;
przewijalny div.height: 0;
Zobacz tę odpowiedź, aby uzyskać więcej informacji na temat przewijania.
źródło
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:
Następnie powiedz flex-2-child, aby stał się elastyczny:
Zobacz http://jsfiddle.net/2ZDuE/10/
Powodem jest to, że flex-2-child nie jest elementem Flexbox, ale jego rodzicem jest.
źródło
align-items: center
jeśli używaszalign-self: stretch
tylko na jedno dziecko.min-height: 100vh;
do.flex-2
elementu, aby działał. Dzięki za pomoc!Przypuszczam, że zachowanie Chrome jest bardziej zgodne ze specyfikacją CSS (choć jest mniej intuicyjne). Zgodnie ze specyfikacją Flexbox domyślna
stretch
wartośćalign-self
właściwości zmienia tylko wartość użytą „właściwości cross size” elementu (height
w tym przypadku). I, jak rozumiem specyfikację CSS2.1 , wysokości procentowe są obliczane na podstawie określonej wartości wartości nadrzędnejheight
, a nie jej wartości użytej. Na określoną wartość rodzicaheight
nie mają wpływu żadne właściwości flex i nadal jestauto
.Ustawienie wyraźnych
height: 100%
sprawia, że formalnie można obliczyć wysokość procentową dziecka, podobnie jak ustawienieheight: 100%
dohtml
pozwala obliczyć wysokość procentowąbody
w CSS2.1.źródło
height:100%
do.flex-2
. Oto jsfiddle .height: 100%
daje mi bardzo dziwne wyniki w Chrome. Wygląda na to, że powoduje to ustawienie „określonej wysokości” na całkowitą wysokość kontenera , a nie na wysokość samego elementu, co powoduje niepożądane przewijanie, gdy inne elementy mają obliczone względem niego rozmiary.Znalazłem rozwiązanie samodzielnie, załóżmy, że masz CSS poniżej:
W takim przypadku ustawienie wysokości 100% nie będzie działać, więc ustawiam
margin-bottom
regułę naauto
przykład:a dziecko zostanie wyrównane do najwyższego z rodziców, możesz także użyć
align-self
reguły, jeśli wolisz.źródło
Pomysł polegałby na tym, że
display:flex;
zflex-direction: row;
jest wypełnianiemcontainer
div za pomocą.flex-1
i.flex-2
, ale to nie znaczy, że.flex-2
ma 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
) zheight:100%;
, musisz ustawić nadrzędnegoheight:100%;
lub użyćdisplay:flex;
zflex-direction: row;
na.flex-2
div 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-child
i zastosowanodisplay:flex;
na.flex-2
: http://jsfiddle.net/2ZDuE/3/źródło
HTML
css
http://jsfiddle.net/2ZDuE/750/
źródło
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.
źródło
.pojemnik { . . . . wyrównaj elementy: odcinek; . . . . }
źródło
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:
kontener css:
i oczywiście obejmują rdzeń css + 0,2
usłyszeć skrzypce
źródło