Как решить эту проблему с горизонтальным скроллом дочерних элементов в меню?

celtrix, можете воспользоваться таким хаком: меняете в .MenuMainItemGroup .MenuMainItemGroup__item min-height: 100% на width: 100vw.
Тогда строки будут растягиваться не на ширину контейнера, а на ширину экрана.

Как сверстать такое меню?

У вас, наверное, для контейнера с пунктами меню что-то вроде:

display: flex;
flex-direction: row;
flex-wrap: wrap;

Макет явно не предполагает верстку пунктов меню построчно.
Поменяйте на flex-direction: column, высоту контейнера зафиксируйте.

Почему элемент flex-контйнера не выходит за его пределы?

Drovosek01, блоковые контейнеры обязаны - они и растягиваются в зависимости от контента. Во флексбоксе все сложнее, т.к. кроме ширины отдельного элемента внутри надо еще учитывать много всего, включая ширину и высоту самого контейнера и других элементов внутри, возможность переноса не вмещающихся элементов на другую строку и т.д. Поэтому у элемента будет нужная вам ширина только если позволяют условия.
Например, в вашем случае:
- первому элементу задана ширина, заведомо слишком большая для контейнера
- растягивать контейнер по главной оси нельзя
- перенести на другую строку нельзя (flex-wrap: nowrap по умолчанию)
- а у остальных элементов тоже есть контент и паддинги, которые тоже надо учитывать, хотя бы по минимуму
Поэтому в итоге в контейнере элементы умещаются так, как будет оптимальнее, "чтобы всем было хорошо".

Модальное окно на vue?

Smeecy Smeecy, добавьте в обработчик нажатия кнопки в хедере этот метод вместо того, что сейчас:

handleModal() {
  this.$emit("open");
}

А в App.vue прослушивайте событие open и по нему выполняйте showModalLogin = true.

Модальное окно на vue?

1. А зачем вы "название транзишина" используете как компонент и прикручиваете ему event listener?
2. А вы посмотрите внимательнее код Header.vue, который выложили.

В общем, пока понятно, что ничего непонятно. Поддерживаю второго ответившего - выложите реальный код, который пытаетесь выполнять.
И не надо код урезать, так еще хуже, потому что неясно, что вы убрали специально, а что - ошибка.

Как правильно разработать одностраничную ИС с т.з. правильного тона программирования?

Не знаю, я не пишу на php. Если проще, то можно и так.

Нужно продублировать круг, но когда я делаю это, то выходит какая-то дичь, почему?

Зачем вы три раза перезаписываете window.onload? Естественно, у вас будет "слетать".

Кто может обьяснить рекурсию?

Это спред результата вызова функции, т.е. массива.

То же самое, что и

const updatedArray = rangeOfNumbers(startNum + 1, endNum);
return [...numArr, ...updatedArray];

Почему элемент flex-контйнера не выходит за его пределы?

Как вариант - проставить min-width: 20000px вместо width, хотя трудно представить, зачем вам может понадобиться то, что получится в итоге.

Почему элемент flex-контйнера не выходит за его пределы?

Вы можете проставить хоть 1000000px, элемент все равно не будет такой ширины, потому что он ограничен шириной контейнера. А контейнер - это не блочный элемент (display: block), а флексовый, он по главной оси не растягивается.
Убрать flex-basis у элемента = поставить flex-basis: auto.
А при flex-basis: auto ширина берется по width. Если width не указан, то по контенту.
Но ширина каждого отдельно взятого элемента - предварительная, окончательно будет высчитана, когда этот элемент уложится в контейнер со всеми остальными.
У них же тоже flex-basis: auto, только ширина, в отличие от .itm1, не указана. Поэтому для них ширина высчитывается так, чтобы вместилось их содержимое, а для .itm1 берется ширина, максимально близкая к указанной вами, чтобы оставить нужное место для других элементов.
Такие вот пироги.

Можно ли вручную скармливать jest'у тесты?

Замените 'Google' на 'should be titled "Google"' (или на любой другой it) - запустит конкретно его.

Как сдвинуть 3 блока относительно друг друга в CSS?

Для псевдоэлементов принцип ровно тот же, что в примере, только для ::after и ::before дополнительно прописываешь высоту, ширину и z-index.

Как установить максимальную ширину элемента в галерее на гридах?

Почему это? Будут и сжимаются вплоть до минимального значения, проверьте на разрешениях 500-600.