Expand div when divs nested inside overflow - css

Question

I am trying to figure out how to expand a div when the children contain divs that overflow (to show overlapping images);
div.container {
position:relative
}
div.column {
display: inline-block; // in my case I want to avoid wrapping
width: 180px;
}
div.item-contains-long-image {
display: block;
height: 25px;
overflow: visible;
position: relative;
}
I would like the container to expand vertically to contain the images overflowing from the inner div. I could add padding to the bottom of the div equivalent to the image height, but am looking for a better way.

Answer 1

#Teobis i took your answer as base for a flex example, hope you dont mind :)
div.container { /* this has been rewritten */
display: flex;
flex-direction: row;
}
div.column {
border:1px solid blue; /*just to show the size*/
display: inline-block; /* in my case I want to avoid wrapping */
width: 180px;
vertical-align:top;
}
div.item-contains-long-image {
display: inline-block;
height: 25px;
/* overflow: visible; no needed, default property*/
position: relative;
}
<div class="container">
<div class="column">
<div class="item-contains-long-image">
<img src="http://via.placeholder.com/180x270">
</div>
</div>
<div class="column">
<div class="item-contains-long-image">
<img src="http://via.placeholder.com/180x310">
</div>
</div>
<div class="column">
<div class="item-contains-long-image">
<img src="http://via.placeholder.com/180x110">
</div>
</div>
</div>

Answer 2

Is this structure what you are looking for??
First of all, you need white-space:nowrap; on the parent of display: inline-block;
or you could use flexbox;
div.container {
position:relative;
border:1px solid red; /*just to show the size*/
white-space:nowrap; /*Necesary for no wrap on .column*/
min-height:150px; /* minimum height */
}
div.column {
border:1px solid blue; /*just to show the size*/
display: inline-block; /* in my case I want to avoid wrapping */
width: 180px;
vertical-align:top;
}
div.item-contains-long-image {
display: inline-block;
height: 25px;
/* overflow: visible; no needed, default property*/
position: relative;
}
<div class="container">
<div class="column">
<div class="item-contains-long-image">
<img src="http://via.placeholder.com/180x270">
</div>
</div>
<div class="column">
<div class="item-contains-long-image">
<img src="http://via.placeholder.com/180x310">
</div>
</div>
<div class="column">
<div class="item-contains-long-image">
<img src="http://via.placeholder.com/180x110">
</div>
</div>
</div>
Hope this helps