Flexbox column wrap is not equal width - html

Question

I've created a simple masonry layout using flexbox column wrap, however I've noticed that the column with "Film/TV" and "Pop" is significantly smaller than the others.
How can I force each column to have approximately the same width?
Here's my CSS code:
& .masonry-layout {
display: -webkit-box;
display: flex;
flex-flow: column wrap;
width: 100%;
height: 730px;
& .item {
background-repeat: no-repeat;
background-size: cover;
box-sizing: border-box;
border-radius: var(--theme-border-radius);
display: flex;
flex-direction: column;
padding: 10px;
margin: 0 5px;
margin-bottom: 10px;
& .item__content {
align-self: flex-end;
flex-direction: row;
width: 100%;
box-sizing: border-box;
color: var(--theme-color-white);
font-size: calc(var(--teft-typography-base) * 0.75);
font-weight: bold;
text-transform: uppercase;
}
& .svg {
display: flex;
flex-direction: row;
flex-grow: 2;
justify-content: center;
width: 100%;
}
}
}
Here's the HTML:
<div class="masonry-layout">
<div class="item" style="background-image:url('<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/assets/images/landing-page/browse-library/>
<div class="svg">
<?php if (!empty ( $item->svg ) ) { echo ( $item->svg ); } ?>
</div>
<div class="item__content">
<span><?php echo esc_html( $item->text ); ?></span>
</div>
</div>
</div>

Answer 1

When I removed the span element, everything was sized as expected.

Answer 2

set a minimum width ( or / and ) maximum width to keep them similar or the same size.