Взгляните на это изображение:
Как вы можете видеть, 2 концевые ссылки выходят из контейнера-якоря.
Это происходит только на iPad (с помощью симулятора для тестирования).
На рабочем столе он ведет себя так, как должен, разбивая слова в других ссылках, позволяя больше места распределять оставшиеся предметы.
Как будто ios не знает, как правильно сломать текст в первой ссылке.
.nav-section {
padding: 0 30px;
}
.nav-section__list {
display: inline-flex;
align-items: stretch;
margin: 0 auto;
}
.nav-section__item {
padding: 0 20px;
}
.nav-section__link {
display: block;
background: red;
}
<nav class="nav-section">
<div class="nav-section__list">
<div class="nav-section__item">
<a href="#" class="nav-section__link">AAAAA AAAA-AAAAAAAA AAAAAAAAA</a>
</div>
<div class="nav-section__item">
<a href="#" class="nav-section__link">AAA AAAAAAAA AAAAAAAAAA</a>
</div>
<div class="nav-section__item">
<a href="#" class="nav-section__link">AAAAAAAAAAA</a>
</div>
<div class="nav-section__item">
<a href="#" class="nav-section__link">AAAAAAA</a>
</div>
</div>
</nav>