Некорректно работает flex-shrink на андроиде

Добрый вечер.

Не могу понять в чем проблема. Не совсем корректно работает свойство flex-shrink на планшете с андроид и ios, не работает только для стандартных браузеров, в хроме все ок.

В блок шириной 25% от общей ширины экрана помещена строка, а в строку три ссылки. При адаптации страницы, что бы ничего не переходило на новуюс троку или за пределы блока было использовано:

<span class="style">
 <a class="user-name" title=""></a>/
 <a class="user-type" title=""></a>/
 <a class="user-status" title=""></a>
</span>

.style {
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
 width: 100%;
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
}

и на первую ссылку из строки:

.user-name {
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
}

На вторую и третью ссылки - ничего. На ПК, телефоне, iPad отрабатывает так, т.е. сокращает первую часть текста так, что бы влезло все остальное (текст из двух других ссылок).

А на андроид выглядит так:

т.е. оно скрывает часть первой ссылки, но вторая и третя все равно накладываются.

Надеюсь, что понятно описала. Заранее спасибо всем.