Почему применяется сразу несколько медиа-запросов?
Последовательность записи
Не переопределяйте свойства, которые не изменяются. 
Зачем вы задаете флекс 2 раза (боюсь даже, что не 2), если блок как был флексовым, так и остался? С остальными свойствами аналогично.
Т.е. в примере со скрина вторая группа медиа вообще не нужна, потому что не поменялось вообще ничего.

Вспомните неравенства в школе. Тут тоже самое. 
Ширина окна 300 попадает в оба условия. Соответственно, и стили применяются и те и те. 
Браузер как будто бы игнорирует скобки медиа и высчитывает специфичность как обычно.