不尊重兒童元素的高度

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

這兩個需要也可設置爲內聯-FLEX：

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

U pdated fiddle：https://jsfiddle.net/8m3upb0o/1/