Hidden overflow not working with flexbox and margin auto - html

Question

I have a flex container with individual child containers within it. Within those child containers, I have a simple content div and a title div. What I am trying to do is centre the title text vertically, but keep it at the top of the box. Then, I am trying to centre the content div in the box, both horizontally and vertically.
I have sort of figured it out (but knowing me this code is a load of drivel), but now when the viewport size decreases, the content text (with overflow: hidden) does not hide when the size decreases. I have figured out that this is down to the margin being set to 0, but I need it to be set to 0 in order for the bloody content div to center!
Any and all help offered is much appreciated. Here is a link to the jsfiddle that I created in order to help you visualise the problem. Change the size of the viewport and you'll see my issue, namely on the "Total cash amongst players" box.
http://jsfiddle.net/mpqbassm/
body {
background: #000;
}
.flex-container {
display: flex;
justify-content: space-around;
margin-right: 10px;
margin-bottom: 10px;
}
.flex-info {
color: white;
font-family: 'Arial', sans-serif;
box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2);
padding: 10px;
border-radius: 2px;
width: 20%;
height: 100px;
display: flex;
flex-direction: column;
}
.flex-info.green {
background: #79B0B4;
}
.flex-info.blue {
background: #7993B4;
}
.flex-info.foam {
background: #79B47D;
}
.flex-info.pink {
background: #9B79B4;
}
.flex-info.red {
background: #B4797F;
}
.flex-info .flex-title {
font-size: 16px;
text-align: center;
white-space: nowrap;
overflow: hidden;
}
.flex-info .flex-content {
font-size: 40px;
margin: auto;
overflow: hidden;
}
<div class="flex-container">
<div class="flex-info green">
<div class="flex-title">Number of characters created</div>
<div class="flex-content">46,401</div>
</div>
<div class="flex-info blue">
<div class="flex-title">Number of vehicles purchased</div>
<div class="flex-content">499,012</div>
</div>
<div class="flex-info foam">
<div class="flex-title">Total cash amongst players</div>
<div class="flex-content">$192,012,299</div>
</div>
<div class="flex-info red">
<div class="flex-title">Total bans issued</div>
<div class="flex-content">12</div>
</div>

Answer 1

To stop the content from overflowing, overflow: hidden must be on the parent container of the element.
In this case, that would be any div with the class .flex-info.
Take a look at this in practice below.
body {
background: #000;
}
.flex-container {
display: flex;
justify-content: space-around;
margin-right: 10px;
margin-bottom: 10px;
}
.flex-info {
color: white;
font-family: 'Arial', sans-serif;
box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2);
padding: 10px;
border-radius: 2px;
width: 20%;
height: 100px;
display: flex;
flex-direction: column;
overflow:hidden;
}
.flex-info.green {
background: #79B0B4;
}
.flex-info.blue {
background: #7993B4;
}
.flex-info.foam {
background: #79B47D;
}
.flex-info.pink {
background: #9B79B4;
}
.flex-info.red {
background: #B4797F;
}
.flex-info .flex-title {
font-size: 16px;
text-align: center;
white-space: nowrap;
overflow: hidden;
}
.flex-info .flex-content {
font-size: 40px;
margin: auto;
overflow: hidden;
}
<div class="flex-container">
<div class="flex-info green">
<div class="flex-title">Number of characters created</div>
<div class="flex-content">46,401</div>
</div>
<div class="flex-info blue">
<div class="flex-title">Number of vehicles purchased</div>
<div class="flex-content">499,012</div>
</div>
<div class="flex-info foam">
<div class="flex-title">Total cash amongst players</div>
<div class="flex-content">$192,012,299</div>
</div>
<div class="flex-info red">
<div class="flex-title">Total bans issued</div>
<div class="flex-content">12</div>
</div>
</div>