Как правильно использовать flexbox?
У меня один ПК с Ubuntu и все. Нет Mac, нет IOS. 
Если мощность компьютера позволяет, то установите VMware + Mac OS + Xcode  coha.look-website.xyz - последний мой проект, в котором наблюдаются косяки только в браузере Safari, а таже в Safari и Chrome под IOS, где проблему выявить так и не удалось.
Вы используете только -ms префикс добавьте ещё -webkit префикс. 
На примере .main класса:
у вас: .main {
    max-width: 1170px;
    margin: 0 auto;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
}
а какой должен быть:.main {
    max-width: 1170px;
    margin: 0 auto;
     display: inline-block;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-pack: justify;
    -webkit-justify-content:space-between;
    justify-content: space-between;
    -ms-flex-flow: row nowrap;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
}
Частенько вертска едет из-за отсутствия flex-bazis - вы можете задавать его в тех же величинах (в процентах лучше, конечно) и поддержать через width или max-width. Но с max-width - все темно - часто мобилы с сафари это свойство игнорируют как факт.
Еще хак - поиграйтесь с flex: 1 0 initial; - тут самое интересное именно initial.