Make two flex items each 50% height of parent

I am using css flex layout to build a dashboard and would like to put two widgets (one on top of the other) inside of a flex item and make them 50% height of their parent at all times (regardless of content). So if my html is:

<div class="flex-container">
  <div class="flex-item">
    <div class="widget" id="w1">
      widget 1 content
    </div>
    <div class="widget" id="w2">
      widget 2 content
    </div>
  </div>
</div>

and my css looks like:

.flex-container {
  display: flex;
  flex-direction: column;
}
.flex-item {
  flex: 1;
}

How can I get the two .widgets to always occupy 50% height of .flex-item?

I've tried:

.flex-item {
  flex: 1;
  display: flex;
}
.widget {
  flex: 1;
}

But this only works when the content in both widgets are the same.

I've worked up a more elaborate jsfiddle to better illustrate my issue.

Thanks in advance!