如何防止文本缩小与flexbox

时间:2017-01-19 07:36:27

标签: css flexbox

当使用溢出设置为其中一个项目的弹性框时,我遇到了意外行为。它在浏览器上按预期工作,但在移动设备上,左侧文本缩小到几乎不可读。

这似乎只在文本实际上开始溢出时发生。 有没有办法阻止这种行为?

    <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>

1 个答案:

答案 0 :(得分:1)

您可能缺少缩放页面所需的视口元标记:

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

如果没有元标记,在较小的设备上,浏览器只会将页面呈现在桌面上,因此文本非常小。