Div不尊重儿童元素的高度

Question

在我的网站上，我创建了一个文章网格。但是，我无法让容器元素尊重其中的子元素的高度。你可以在这个截图中看到容器比它里面的内容高几个像素（点击放大）：

现在，我总能设定一个固定的高度，但我不是。图像总是相同的高度，但标题会有所不同，所以我希望容器能够灵活地适应标题的高度。

CSS：

div.related-content-block:nth-child(2n+1) {
    padding: 12.5px 12.5px 12.5px 0;
}
div.related-content-block a {
    height: auto;
}
div.related-content-block a {
    display: flex;
    flex-direction: row;
    width: 100%;
}
.m-pop-art-col-right {
    padding: 0 0 0 10px;
}
.m-pop-art-title {
    color: #464646;
    font-size: 1.2em;
    font-weight: 600;
    line-height: 1.2em;
}
.related-content-footer .m-pop-art-date {
    color: #898989;
}

HTML：

<div class="related-content-block">       
  <a href="/article/women/cosmetic-surgery-options-after-pregnancy" class="m-pop-art-container">
  <div class="m-pop-art-col-left">
    <div class="m-pop-art-img"><img typeof="foaf:Image" class="image-style-related-content" src="http://living.dev/sites/default/files/styles/related_content/public/field/image/mommymakeover.jpg?itok=leB4Cihe" width="110" height="110" alt="fit healthy mother holding baby "></div>
  </div>
  <div class="m-pop-art-col-right">
    <div class="m-pop-art-title">Cosmetic Surgery Options After Pregnancy</div>
    <div class="m-pop-art-date">Apr. 3, 2017</div>
  </div>
</a>    
</div>

这是我的代码的JSFiddle：https://jsfiddle.net/8m3upb0o/

Answer 1

这两个也需要设置为inline-flex：

.m-pop-art-img,
.m-pop-art-col-left {
  display: inline-flex;
}

更新了小提琴：https://jsfiddle.net/8m3upb0o/1/