Flexbox prevent shrink on Mobile

Question

I have a div which contains some divs of .quality a div of #infinite and a #title div. The number of .quality divs may change depending on the available qualities. The #title div should fit in the remaining space and be cut off if there is no space but it can never shrink the other divs.

This works fine in desktop but it doesn't work on iOS in Safari, Chrome and Firefox.

The first picture is taken from Firefox on desktop and bottom picture is taken on Safari on iOS 9.2.1

How can I prevent the .quality divs from shrinking?

Demo: 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;
}

Have you tried `flex-shrink: 0` on `.quality` divs? – Michael Benjamin Feb 02 '16 at 16:46 — Michael Benjamin, Feb 02 '16 at 16:46

score 4 · Accepted Answer · answered Feb 02 '16 at 22:14

4

added #quality {flex-shrink: 0} and worked.

answered Feb 02 '16 at 22:14

M1X

4,971
10
61
123

1

Ah, that makes sense. Didn't notice that `#quality` was also a flex item. My bad. Nice job. – Michael Benjamin Feb 03 '16 at 14:20

score 0 · Answer 2 · answered Feb 02 '16 at 16:51

0

You can achieve this by adding flex-shrink:0 to your .quality divs like so:

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

Hope this helps!

answered Feb 02 '16 at 16:51

Mike Donkers

3,589
2
21
34

This doesn't work it makes it worse. The title goes more on the left than before. – M1X Feb 02 '16 at 18:41

Flexbox prevent shrink on Mobile

2 Answers2