Flexbox vertical align specific content within a wrapper? - html

Question

My CMS has a rather rigid setup with 2 columns with headers and content, as below:
.wrapper {
overflow: auto;
border: 1px solid #ccc;
text-align: center;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
.left,
.right {
float: left;
width: 45%;
padding: 5px;
}
<div class="wrapper">
<div class="left">
<h3>Title (should be aligned to top)</h3>
<div class="content">
left<br>
left<br>
left<br>
left<br>
</div>
</div>
<div class="right">
<h3>Title (should be aligned to top)</h3>
<div class="content">
right
</div>
</div>
</div>
jsFiddle
I want to make the .content of each column align vertically to the middle but keep the header h3s vertically aligned to the top.
Normally I would achieve vertical align using flexbox as such:
.wrapper {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
but of course this affects all elements within .wrapper.
Would anyone know a way I could 'target' the .content classes and get the same effect (keeping in mind I cannot really alter the HTML)?

Answer 1

This is a sort of a hack, but it works:
Remove align-items: center from the wrapper and flex:1 to the flex children left and right
Make the inner left and right container a column flexbox and center the h3 and content using justify-content:center
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;
}
.left h3, .right h3 {
margin-bottom: auto;
}
.content {
margin-bottom: auto;
}
<div class="wrapper">
<div class="left">
<h3>
Title (should be aligned to top)
</h3>
<div class="content">
left
<br>left
<br>left
<br>left
<br>
</div>
</div>
<div class="right">
<h3>
Title (should be aligned to top)
</h3>
<div class="content">
right
</div>
</div>
</div>

Answer 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
}