Размер гибкого элемента изменяется, когда я увеличиваю размер окна в Chrome

Question

У меня проблема с использованием flex box CSS, надеюсь, все помогут мне.Элемент Flex позволяет перетаскивать текст при реагировании. введите описание изображения здесь

Это нормально, когда размер окна уменьшается, и только Chrome получает эту проблему.

.career-nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.career-nav a {
    position: relative;
    display: inline-block;
    font-size: 1.428em;
    line-height: 1;
    color: #000;
    padding: 13px 0;
    text-decoration: none;
    transition: background .2s ease;
}

<ul class="career-nav">
  <li><a href="#Citya" title="A City">City A</a></li>
  <li><a href="#Cityb" title="Hanoi">City B</a></li>
  <li><a href="#Cityc" title="Danang">City C</a></li>
</ul>

Answer 1

Проблема в том, что вы оставляете свою навигационную ссылку со стандартным поведением flex.

Я бы попытался добавить атрибут "flex" к ссылкам, в то же время его будет полезно установить "Поведение nowrap к контейнеру

 .career-nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: nowrap;
  }
 .career-nav a {
    position: relative;
    display: inline-block;
    font-size: 1.428em;
    line-height: 1;
    color: #000;
    padding: 13px 0;
    text-decoration: none;
    transition: background .2s ease;
    flex: 0 0 auto;
 }

fiddle: http://jsfiddle.net/fbxq74rw/

Проверено на Chrome, Firefox и Safari