An initial setting on flex items is
min-width: auto . This means that a flex item, by default, cannot be smaller than the size of its content.
text-overflow: ellipsis cannot work because a flex item will simply expand, rather than permit an overflow. (Scroll bars will not render either, for the same reason.)
To override this behavior, use
min-width: 0 or
I probably googled “flex child overflowing parent width” 10 times in my life already, because I always forget about this fix
Regarding your first problem:
I don’t think either that there’s a solution for that, other than controlling the wrapping with media queries.
If I understand the problem correctly, you have two wrapping elements which are “in competition” with each other. While resizing the viewport, the browser calculates the necessary space and checks it against the available space. Once there isn’t enough space, it has to decide whether it will wrap the outer container or the contents of the inner row.
Unfortunately, there’s no way to set wrapping priority, so you can’t control the order in which elements wrap.
I found this example, which seems to show the opposite behavior of what your code does (inside wraps before outside). This makes me assume that wrapping simply happens in chronological order.