Why doesn't {width: 100%; max-width: 320px} + flexbox?

Question

css

I made it with flexbox (prefixes are fine).
Set the width of the blocks:

.news {
    width: 100%;
    max-width: 320px;
}

Everywhere the blocks line up (Screenshot 1), and in Safari they line up in a column (Screenshot 2) and (attention!!!) when I rewrite the width to width: 320px, the blocks line up.
Why is that? Block width is already 320px thanks to max-width

Answer 1

Min and max size declarations are ignored when wra... . Like it. In general, you need to set flex-basis.