Почему flex-элемент игнорирует ширину flex-контейнера и выходит за его пределы?
Нашел более-адекватное решение: flex-элементу просто нужно задать overflow: hidden;.UPD: Еще один вариант вместо overflow: hidden; можно задать min-width: 0;.
уберите  white-space: nowrap; и все влезет