Flex-box items shrink even with a given width. Is this normal behavior?

Question

css

Started learning flex-box. Tell me, it's normal when the elements have a width, but when the screen is reduced, the blocks are still compressed. Is this how flexes should be? If so, how to make the flex not shrink, but jump to the next line? Here is an example where I saw it: https://jsfiddle.net/api/post/library/pure/

Answer 1

In order to jump, you need to add the propertyflex-wrap: wrap;

Answer 2

Yes, this is normal behavior for flex items. To transfer flex-wrap, as mentioned above (almost the same as white-space). min-width to help you. Read what flex-basis, flex-grow and flex-shrink are for (useful if you're making a sticky footer)

Answer 3

flex-shrink: 0; and no min-width is needed anymore

Answer 4

html5.by/blog/flexbox - here is a detailed description, and attention is paid to flex-wrap, as written above