如何将父元素推送到绝对定位div的高度

Question

这是我的小提琴：

的jsfiddle

您可以在JSFiddle中找到源here。

CSS

.container {
    overflow:hidden; 
    position:relative;
    height: 350px;
}
.container .article {
    width:100%;
    position:absolute;
    background-color: red;
}

HTML

<div class="container">
    <div class="article">
            <img src="img/5.jpg">
            <span>title goes here</span>
            <span>some informations goes here</span>
    </div>
    <div class="article">
            <img src="https://wiki.documentfoundation.org/images/thumb/8/88/LibreOffice_MotifScatter_RGB.png/300px-LibreOffice_MotifScatter_RGB.png">
            <span>title goes here</span>
            <span>some informations goes here</span>
    </div>
    <div class="article">
            <img src="https://c.s-microsoft.com/en-us/CMSImages/microsoft-design-practice-delight.png?version=0c2ab83d-b515-9006-7c34-bf5021ffb656">
            <span>title goes here</span>
            <span>some informations goes here</span>
    </div>
    <div class="article">
            <img src="https://www.verdadesign.com/assets/styles/square_300/public/thumbnails/image/custom-web-design-icon.png?itok=MS2LOkw6">
            <span>title goes here</span>
            <span>some informations goes here</span>
    </div>
    <div class="article">
            <img src="http://www.suma-design.co.uk/images/graphic-design.jpg">
            <span>title goes here</span>
            <span>some informations goes here</span>
    </div>
    <div class="article">
            <img src="http://www.redoinfotech.com/images/web_designing.jpg">
            <span>title goes here</span>
            <span>some informations goes here</span>
    </div>
</div>

在css部分，我想删除高度：350px声明，让我的网页浏览器选择图像的高度，但当我删除高度时，一切都消失了。我知道这是因为我使用的是位置：绝对但我需要两个位置：绝对并移除高度：350px。那我怎么能实现呢？

注意：使用clearfix无法解决问题。