Flexbox equal height not working

Question

I've been trying to create a 3-column layout with Flexbox where the blocks are of equal height. In the first picture below, the expected behaviour is shown (which, ironically, only works in IE11). In Microsoft Edge, Chrome and Firefox, the output is as shown in the second picture, which is not what I'd like to accomplish.

After looking around at Stackoverflow and Google, I can't seem to find a solution to my problem. If anyone would be able to assist me on where this goes wrong, that would be highly appreciated!

JSFiddle: http://jsfiddle.net/uyvhrjjb/1/

CSS:

#threeblocks {
    width: 100%;
    overflow: hidden;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}


#threeblocks .block {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    width: 30%;
    margin: auto;
    border: 1px solid #B8B8B8;  
}

HTML:

<div id="threeblocks">
    <div class="block" style="text-align: center">
        <p><strong>Title 1</strong></p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas, lorem nec vestibulum fermentum, massa magna efficitur augue, sed fermentum ligula eros sit amet eros.</p>
    </div>

    <div class="block" style="text-align: center">
        <p><strong>Title 2</strong></p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas, lorem nec vestibulum fermentum, massa magna efficitur augue, sed fermentum ligula eros sit amet eros. Mauris est velit, scelerisque eu libero ac, bibendum consequat neque. Integer sed ligula sed erat rhoncus bibendum. Donec eget tortor dui. Vestibulum ex dui, consectetur a iaculis vestibulum, eleifend ut nibh. Nullam a ultrices dui. Sed sit amet augue euismod, vehicula leo id, convallis orci.</p>
    </div>

    <div class="block" style="text-align: center">
        <p><strong>Title 3</strong></p>

         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas, lorem nec vestibulum fermentum, massa magna efficitur augue, sed fermentum ligula eros sit amet eros.</p>
    </div>

</div>

Answer 1

You can remove the margin of the items and it works

http://jsfiddle.net/uyvhrjjb/4/

      #threeblocks {
    width: 100%;
    overflow: hidden;

    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

#threeblocks .block {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    width: 30%;
    border: 1px solid #B8B8B8;  
}

Answer 2

从规则中删除保证金：auto：#threeblocks .block