Mam flexbox od lewej do prawej:
.wrapper {
display: flex;
flex-direction: row;
align-items: stretch;
width: 100%;
height: 70vh;
min-height: 325px;
max-height:570px;
}<div class="wrapper">
<div class="left">Left</div>
<div class="right">Right</div>
</div>Problem polega na tym, że właściwe dziecko nie zachowuje się w sposób responsywny. Aby być konkretnym, chcę, aby wypełniał wysokość opakowania. Jak to osiągnąć?
Dzięki, Debbie
Odpowiedzi:
73 dla odpowiedzi № 1Dzieci kontenera typu flexbox automatycznie wypełniają przestrzeń pionową kontenera.
Sprecyzować
flex: 1;dla dziecka, jeśli chcesz wypełnić pozostałą przestrzeń poziomą:
.wrapper {
display: flex;
flex-direction: row;
align-items: stretch;
width: 100%;
height: 5em;
background: #ccc;
}
.wrapper > .left
{
background: #fcc;
}
.wrapper > .right
{
background: #ccf;
flex: 1;
}<div class="wrapper">
<div class="left">Left</div>
<div class="right">Right</div>
</div>- Sprecyzować
flex: 1;dla obu dzieci, jeśli chcesz, aby wypełniały równe ilości przestrzeni poziomej:
.wrapper {
display: flex;
flex-direction: row;
align-items: stretch;
width: 100%;
height: 5em;
background: #ccc;
}
.wrapper > div
{
flex: 1;
}
.wrapper > .left
{
background: #fcc;
}
.wrapper > .right
{
background: #ccf;
}<div class="wrapper">
<div class="left">Left</div>
<div class="right">Right</div>
</div>0 dla odpowiedzi nr 2
to wypełnia wysokość opakowania! testowałem to w Chrome i Firefox i nie było problemu. może zbytnio uprościłeś swój kod. możesz to sprawdzić, ustawiając background-color dla dzieci lub ustawienie align-items: center w opakowaniu.