Flexbox element height regardless of its content

I know this sounds like another flexbox question that is being addressed elsewhere, but I can't seem to find a solution from existing google or stackoverflow posts.

The problem is simple.

I have 3 child divs inside a parent div, one of which contains content larger than its final size. I would like each child to have 1/3

their parent REGARDLESS their content.

Here is a fiddle: http://jsfiddle.net/xeqo0msq/

Here is the HTML:

<div class="parent">
   <div class="child red">
       <div class="content">1</div>
   </div>
   <div class="child blue">2</div>
   <div class="child green">3</div>
</div>

      

        
        
        
      

    

And the related CSS:

.parent {
   display: flex;
   flex-direction: column; /*or row*/
   height: 100%;
   width: 100%;
}

.child {
   flex: 1;
}

.content{
   width: 800px;
   height: 100px;
}

.red {background: red;}
.blue {background: blue;}
.green {background: green;}

      

        
        
        
      

    

For flex-direction: row;

it works as expected: every child is 1/3

their parent, although the first content is larger. The width acts as if it is independent of the content.

For the flex-direction: column;

first child, more than the other two.

Is it possible to achieve this with flexbox and flex-direction: column;

?