Flexbox 等高不起作用

Question

我一直在尝试使用 Flexbox 创建一个 3 列布局，其中块的高度相同。在下面的第一张图片中，显示了预期的行为（具有讽刺意味的是，它仅适用于 IE11）。在 Microsoft Edge、Chrome 和 Firefox 中，输出如第二张图所示，这不是我想要完成的。

环顾 Stackoverflow 和 Google 后，我似乎找不到解决问题的方法。如果有人能够帮助我解决这个问题，那将不胜感激！

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

您可以删除项目的边距并且它可以工作

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;  
}