Apply "flex" directly to an [closed]

I have this HTML, containing a bunch of images

<div class="container"><img class="img-item" src="..."><img class="img-item" src="..."><!-- more images --></div>

I also have this CSS:

.container {  display: flex;  flex-wrap: wrap}.img-item {  width: 100%;}

When I try to set flex: 1 220px; on the .img-item (which is the element), they don't wrap as intended.

However, things work as expected if I wrap each <img> inside a <div> and apply the flex shorthand to those div's.

I'm trying to understand why this is the case. Is there a conflict when you're trying to apply flex properties directly to <img> elements? Removing width: 100% does not help in any way.