CODEWITHSUNDEEP
cssflexbox
Robbie
Robbie

Reputation: 716

How to prevent text from shrinking with flexbox

I have come across an unexpected behavior when using a flex box with overflow set to one of the items. It works as expected when on a browser, but on mobile, the left text shrinks to be almost unreadable.

This only seems to occur when the text is actually begins to overflow though. Is there any way to prevent this behavior?

    <style>

flexHolder{
    height:80%;
    display:flex;
}

rightSide{
    overflow: auto;
}


</style>

<flexHolder>
    <leftSide>
        Left
    </leftSide>
    <rightSide>
        Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right         Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right 
        Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right 
        Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right 
        Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right 
        Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right 
        Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right 
        Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right 
        Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right 
        Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right 
Right Right 
    </rightSide>
</flexHolder>

Upvotes: 1

Views: 459

Answers (1)

dommmm
dommmm

Reputation: 908

You're probably missing the viewport meta tags necessary to scale the page:

http://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_t‌​ag

Without the meta tag, on a smaller device the browser will simply render the page as it were on the desktop, hence the really small text size.

Upvotes: 1

Related Questions