Dziecko Flexbox zwinięte po wyrównaniu - css, flexbox

Nie można dowiedzieć się, jak utrzymać elementy dziecka na tej samej wysokości po obu stronach po dopasowaniu ich zawartości do środka.

Moim celem jest stworzenie układu widocznego na zdjęciu:

  <div class="halves">
<div class="half">
<div class="half-inner is-right">H1</div>
</div>
<div class="half">
<div class="half-inner is-left">H2
<br> asdfs df <br>a sdfadsf sdfa dadsf df asdf afdf sadf asdf  </div>
</div>

.halves{
display: flex;
border: 5px solid red;
.half{
flex: 1;
border: 10px solid yellow;
/* align-items: center; */
display: flex;

.half-inner{
max-width: 100px;


&.is-right{
margin-left: auto;
background: pink;
}
&.is-left{
background: green;
}

}
}
}

Mój obecny kod tutaj: http://codepen.io/zsitro/pen/YqpLba W moim przykładzie odkomentowanie /* align-items: center; */ widać, że element podrzędny się zwija.

Doceniam wszelkie wskazówki. ty

Odpowiedzi:

align-items: center zmusza div do środka flexuw przypadku braku konkretnych deklaracji szerokości / wysokości / flex-base / whatnot, sprawia, że ​​div jest tak duża jak jego zawartość, zachowując białe znaki. Jeśli chcesz, aby div się rozciągał, będziesz potrzebował align-items wartość być stretch więc zajmuje całą wysokość kontenera macierzystego.

Dodatkowo, jeśli chcesz .half-inner div mają być równe szerokości: flex: 1 (lub flex-grow: 1) jest własnością podrzędną, więc deklaracja, którą obecnie masz, dotyczy tylko .half div, a nie .half-inner div. Od rodzica .half div jest kontenerem elastycznym, możesz po prostu dodać flex:1 pod .half-inner CSS i powinieneś być dobry.

.halves{
display: flex;
border: 5px solid red;
.half{
flex: 1;
border: 10px solid yellow;
align-items: stretch;
display: flex;

.half-inner{
max-width: 100px;
flex: 1;

&.is-right{
margin-left: auto;
background: pink;
}
&.is-left{
background: green;
}

}
}
}