How to prevent stretch content display:flex?

Asking for help, faced with this problem

fd24e195.png

Avatars stretch the content, because of what appears lower scrolling, the avatars were placed in the container display: flex and align center, so the customer is told that avatars would appear from the center.

Earlier also faced this problem but then solved by overflow: hidden in the parents, this time, this does not roll because the parent has a shadow.

Actually a question how to prevent stretch content have display: flex?

Page for clarity https://profi.ngens.ru/unk/dist/index.html
June 7th 19 at 15:01
2 answers
June 7th 19 at 15:03
well, considering that default display Flex - no-wrap, all right. there are 2 options:
1.to put a wrap on the parent, and spypot children
2. this string is generally just as a gallery and on minimal no new lines will be simple or custom scrolling or arrow left / right
June 7th 19 at 15:05
First you need to decide how it should look like the line in case the items do not fit. I see there are several options:
1. To carry on a new line, new line center
2. To carry on a new line, but align to the left if content is not enough for 2 line align center
3. To display only what fits in the string
4. Scroll.
From this and dance

Find more questions by tags FlexboxCSS