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

Я имел ввиду не свойство flex-basis, а ширину width. Если для .itm1 задать width: 20000px; и убрать у него свойство flex-basis, то ширина не будет такой, какая она задана в css. Я не понимаю почему так.

.itm1 {
  width: 20000px;
}

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

xversus, а как мне растянуть его на ширину большую длине контейнера, при это не заполняя содержимым (то есть не добавляя ничего внутрь элемента, управляя только css)?

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

xversus, спасибо.
На практике, конечно, это мало где применимо, просто хотелось узнать можно ли это сделать стандартными средствами без перелопачивания верстки :\

xversus, получается когда мы блоку задаем в css свойство width с каким-то значением, то блок не обязан соблюдать это правило? Зачем тогда нужно это свойство?

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