Why flex items don't compress?

Question

css

Good afternoon.
There is a gallery

There are 4 rows.

.gallery
      .gallery-twice
        img(src="assets/i/gallery/1.jpg", alt="")
        img(src="assets/i/gallery/2.jpg", alt="")
      .gallery-tripple
        img(src="assets/i/gallery/3.jpg", alt="")
        img(src="assets/i/gallery/4.jpg", alt="")
        img(src="assets/i/gallery/5.jpg", alt="")
      .gallery-twice
        img(src="assets/i/gallery/6.jpg", alt="")
        img(src="assets/i/gallery/7.jpg", alt="")
      .gallery-tripple
        img(src="assets/i/gallery/8.jpg", alt="")
        img(src="assets/i/gallery/9.jpg", alt="")
        img(src="assets/i/gallery/10.jpg", alt="")

And styles

.gallery-twice,
.gallery-tripple {
  display: flex;
  align-items: flex-start;
  margin-bottom: 6px;
  & > * {
     &:not(:last-child){
        margin-right: 6px;
    }
  }
  img {
    flex-shrink: 0;
                flex-grow: 1;
  }
}

I just don't understand why the pictures are not compressed?

How to solve this problem?

Answer 1

img {
    /* вместо */
    flex-shrink: 0;
    flex-grow: 1;
    /* поставить это */
    flex: 1 1 auto;
}

Although it would be more correct to wrap each picture with a div with the styles above, and give the pictures themselves:

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}