flexbox vertical align child top, center another

Answer 1

Flexbox opens up all sorts of opportunities with margin: auto; this is one of them. Setting margin to auto along the flex axis (vertical in this case) will absorb any extra space before dividing it up between the flex items. Finally it's possible to vertically center stuff without creating a div soup.

.row {
  display: flex;
  align-items: stretch;
  
  margin: -16px;
  background: #ffffd;
}

.row .col {
  display: flex;
  flex-direction: column;
  
  flex: 1;
  
  margin: 16px;
  background: #fff;
}

.header, .content, .footer {
  padding: 16px;
  
  background: red;
}

.content {
  margin-top: auto;
  margin-bottom: auto;
}

    

        
Header #1
        
Lorem Ipsum
Dolor
Sit Amet
        
Footer
    

    

        
Header #2
        
Lorem Ipsum
Dolor