I'm facing an issue on my website where the search results are displayed in card format. However, when there are multiple results, instead of overflowing to the next line, the cards stay on the same line and shrink in size, making the content inside them look unappealing. It ends up looking like this: https://i.sstatic.net/7NJ2m.png.
Here is the code for the div-card:
<div class="card">
<a href="#">
<div class="image">
<div class="title">
</div>
</div>
</a>
<div class="description">
<h5>Title</h5>
<p>Description</p>
</div>
</div>
And the CSS for the card div (the image and description div css are omitted):
.card
{
height:18em;
width:14em;
margin: 10px;
display: flex;
flex-wrap: wrap;
flex-direction:column;
position:relative;
border-radius:16px;
overflow:hidden;
box-shadow: 15px 15px 27px #e1e1e3, -15px -15px 27px #ffffff;
}
Despite using the flex and flex-wrap: wrap properties, the divs do not wrap as expected. I have tried other solutions like display: inline, display: inline-block, and float: left without success. Any help in resolving this issue would be greatly appreciated, as the search results cannot be manually adjusted for line breaks.
Thank you!