Practical flexbox task: there is a parent element with display:flex, width 700px, and child elements each 300px wide. What will change visually when adding flex-shrink: 0 to the blue element?

If a parent element has display:flex and a width of 700px, and its child elements each have a width of 300px, then without additional styles, they will try to fit in one line. Three elements of 300px width do not fit (900px > 700px), so the flex container will apply compression (flex-shrink) to them by default.

When adding flex-shrink: 0 to the blue element:

• The blue element will stop shrinking and will keep its width at 300px.
• The other elements (without flex-shrink: 0) will shrink to fit within 700px.
• If the total width of the elements without compression exceeds 700px, then the blue element will remain at 300px, and the others will decrease in width.

Visually, this means the blue element will keep its width, and the others will become narrower than 300px to fit into the container. If the blue element was, for example, the last one, it will not shrink, but the others will.