The main problem is likely the max-width setting on your nav’s container.
By itself that’s fine, but browsers often have problems when a max-width element contains flex elements inside of it.
The general reasoning is that when you are using width, max-width, min-width, you are specifying sizes in a block-formatting context. Flex boxes have a different method of size calculation which is referred to as a flex-formatting context.