Flexbox предотвращает усадку на мобильном телефоне

Question

У меня есть div, который содержит некоторые divs .quality a div of #infinite и a #title div. Количество разделов .quality может меняться в зависимости от доступных качеств. Деление #title должно располагаться в оставшемся пространстве и быть отрезанным, если пространства нет, но он никогда не может сжимать другие div.

Это прекрасно работает на рабочем столе, но не работает на iOS в Safari, Chrome и Firefox.

Первая картинка взята из Firefox на рабочем стол и нижняя картинка взята на сафари на прошивке 9.2.1

Как я могу предотвратить .quality дивы от сокращения?

Демо:http://beta.kida.al/theheartwantswhatitwants

<div id="title_quality"> 
    <div id="quality"> 
     <div style="display: inline-block;" id="hd720" class="quality">720p</div> 
     <div style="display: inline-block;" id="hd1080" class="quality">1080p</div> 
     <div id="hd1440" class="quality" style="display: none">1440p</div> 
     <div id="hd2160" class="quality" style="display: none">2160p</div> 
     <div style="display: block;" id="infinite" class="quality uninfinite">∞</div> 
    </div> 
    <div id="title">the heart wants what it wants, selena gomez</div> 
</div> 

CSS:

#title_quality { 
    background: #f3f3f3; 
    color: #f8008c; 
    padding: 0 10px; 
    display: flex; 
    overflow: hidden; 
} 

#quality { 
    display: flex; 
} 

.quality { 
    display: inline-block; 
    width: 40px; 
    height: 40px; 
    border-radius: 20px; 
    font: 11px/40px "quicksand"; 
    background: #f3f3f3; 
    color: #f8008c; 
    text-align: center; 
    cursor: pointer; 
    margin: 4px 5px; 
    transition: all .5s ease-in; 
} 

#title { 
    font: 14px/48px "quicksand"; 
    white-space: nowrap; 
    margin-left: auto; 
} 

Answer 1

добавлен #quality {flex-shrink: 0} и работал.

Answer 2

Вы можете достичь этого путем добавления flex-shrink:0 к вашим .quality дивам так:

CSS

.quality { 
    display: inline-block; 
    width: 40px; 
    height: 40px; 
    border-radius: 20px; 
    font: 11px/40px "quicksand"; 
    background: #f3f3f3; 
    color: #f8008c; 
    text-align: center; 
    cursor: pointer; 
    margin: 4px 5px; 
    transition: all .5s ease-in; 
    flex-shrink:0; /* <------- */ 
} 

JsFiddle example

Надеется, что это помогает!