flexbox vertical alinee la parte superior del niño, centre otra
Tengo el siguiente marcado:
.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>
Desafortunadamente, el segundo encabezado no está alineado verticalmente con la parte superior. ¿Hay alguna manera de archivar esto con flexbox? Necesito que el ".header" esté alineado en la parte superior y el ".content" para centrarse en el resto de la caja.
¡Saludos!