Divs with same class adjust to different content - html

Question

I have three divs in a row next to each other. They have the same class and same structure, but their content is different, particularly in length.
My problem is, that all three divs take the height of the one with the "longest" content instead of adjusting to their individual content.
Here's my HTML:
<main class="content">
<div class="column last-match">
<div class="image-wrapper">
<img src="default_thumbnail.jpg"/>
</div>
<div class="text-wrapper">
<a class="heading" href="#"><p class="heading">A Heading</p></a>
<p class="post-excerpt">Some text</p>
Read More
</div>
</div>
<div class="column last-match">
<div class="image-wrapper">
<img src="default_thumbnail.jpg"/>
</div>
<div class="text-wrapper">
<a class="heading" href="#"><p class="heading">A Heading</p></a>
<p class="post-excerpt">Some text that's longer</p>
Read More
</div>
</div>
<div class="column next-matches">
<div class="image-wrapper">
<img src="next_matches.jpg"/>
</div>
<div class="text-wrapper">
<p class="heading">List Heading</p>
<ul class="match-list">
<li class="match">some list item</li>
<li class="match">some list item</li>
</ul>
</div>
</div>
</main>
And the basic CSS:
.content {
display: flex;
flex-wrap: nowrap;
}
.column {
display: flex;
flex-direction: column;
margin: 60px 20px;
min-height: 100px;
width: 33%;
}
.image-wrapper {
width: 100%;
height: 260px;
overflow: hidden;
}
.image-wrapper img {
width: 100%;
height: auto;
}
.post-excerpt {
margin-bottom: 20px;
}
.button {
display: block;
float: left;
margin-bottom: 20px;
padding: 10px;
}
.match {
font-size: 1em;
padding-top: 15px;
}
Here's my code on JSFiddle: https://jsfiddle.net/4h0g73sp/5/
As you will see, the columns will take the height of the one with the most text in it. What I want is them to adjust to their content, so that they have different heights if necessary.
I don't know if it's noteworthy, that I'm working with Wordpress, so these columns are originally inside of some php. If that's important I'm happy to share the code with you, so let me know :)

Answer 1

The issue is because align-items on the flex container defaults to stretch so the flex items takes the height (rows) of the tallest item.
Simply set it to flex-start
.content {
display: flex;
align-items: flex-start;
}
https://jsfiddle.net/4h0g73sp/9/
I have also removed flex-wrap from .content because the default is no wrap so there is no need to declare it
Check https://css-tricks.com/snippets/css/a-guide-to-flexbox/ it's very useful and demonstrates flex fairly well