Vertically centering content in display: flex; columns - css

Question

I’m using Flexbox to align the height of two adjacent columns, which works. I now need to vertically center the inner content within the flex box columns without using fixed heights. Additionally this all needs to work within Bootstrap 3. Please see code below:
.row-flex,
.row-flex > div[class*='col-'] {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex: 1 1 auto;
}
.row-flex-wrap {
-webkit-flex-flow: row wrap;
align-content: flex-start;
flex: 0;
}
.row-flex > div[class*='col-'],
.container-flex > div[class*='col-'] {
margin: -.2px;
/* hack adjust for wrapping */
}
.container-flex > div[class*='col-'] div,
.row-flex > div[class*='col-'] div {
width: 100%;
}
.flex-col {
display: flex;
display: -webkit-flex;
flex: 1 100%;
flex-flow: column nowrap;
}
.flex-grow {
display: flex;
-webkit-flex: 2;
flex: 2;
}
.content {
border: 1px solid black;
padding: 20px;
}
.content-inner {
border: black solid 1px;
padding: 20px;
}
.img {
width: 100px;
height: auto;
display: block;
margin: 0 auto;
}
figcaption {
text-align: center;
}
[class*="col-"] {
padding: 0;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row row-flex row-flex-wrap">
<div class="col-xs-7">
<div class="content">
<div class="content-inner">
<figure>
<img class="img" src="http://i80.photobucket.com/albums/j182/swiftian/headersnstuff/sidebar_zaius.jpg" alt="Macaque in the trees">
<figcaption>Dr. Zaius</figcaption>
</figure>
</div>
</div>
</div>
<div class="col-xs-5">
<div class="content">
<div class="content-inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi.
</div>
</div>
</div>
</div>
<!--/row-->
</div>
<!--/container-->
<hr>
JS FIDDLE
https://jsfiddle.net/baydbzbn/1/
Appreciate any help.

Answer 1

Add this to your .content class CSS definition
display: flex;
align-items: center;