flexbox alinhar verticalmente a parte superior da criança,
Eu tenho a seguinte marcação:
.row {
display: flex;
align-items: stretch;
margin: -16px;
background: #ddd;
}
.row .col {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1;
margin: 16px;
background: #fff;
}
.header, .content, .footer {
padding: 16px;
background: red;
}
<div class="row">
<div class="col">
<div class="header">Header #1</div>
<div class="content">Lorem Ipsum<br />Dolor<br />Sit Amet</div>
<div class="footer">Footer</div>
</div>
<div class="col">
<div class="header">Header #2</div>
<div class="content">Lorem Ipsum<br />Dolor</div>
</div>
</div>
Infelizmente, o segundo cabeçalho não está alinhado verticalmente ao topo. Existe uma maneira de arquivar isso com o flexbox? Preciso que o ".header" esteja alinhado na parte superior e o ".content" seja centralizado no restante da caixa.
Saudações!