Flexbox Vertical Align Specific Content Within A Wrapper?

My CMS has a rather rigid setup with 2 columns with headers and content, as below: jsFiddle I want to make the .content of each column align vertically to the middle but keep th

Solution 1:

This is a sort of a hack, but it works:

1. Remove align-items: center from the wrapper and flex:1 to the flex children left and right

2. Make the inner left and right container a column flexbox and center the h3 and content using justify-content:center

3. Use margin-bottom:auto to push both h3 to the top and allow content to stay at the middle.

See demo below:

.wrapper {
  overflow: auto;
  border: 1px solid #ccc;
  text-align: center;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.left,
.right {
    padding: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}
.lefth3, .righth3 {
    margin-bottom: auto;
}
.content {
    margin-bottom: auto;
}

<divclass="wrapper"><divclass="left"><h3>
    Title (should be aligned to top)
    </h3><divclass="content">
      left
      <br>left
      <br>left
      <br>left
      <br></div></div><divclass="right"><h3>
  Title (should be aligned to top)
  </h3><divclass="content">
      right
    </div></div></div>

Solution 2:

check this fiddle

.wrapper {
    overflow: auto;
    border: 1px solid #ccc;
    text-align: center;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: flex-start;
    -webkit-align-items: flex-start;
    -webkit-box-align: flex-start;
    align-items: flex-start; // changed
}