如何使用 flexbox 防止文本缩小答案

【问题标题】：How to prevent text from shrinking with flexbox如何使用 flexbox 防止文本缩小
【发布时间】：2017-01-19 07:36:26
【问题描述】：

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

这似乎只发生在文本实际上开始溢出时。有什么办法可以防止这种行为？

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

【问题讨论】：

旁白：您使用的是 HTML 处理器吗？ flexHolder、leftSide 和 rightSide 不是有效的 HTML 元素
这些只是自定义元素。它们已经成为有效的 HTML 大约 5 年了。见：developer.mozilla.org/en-US/docs/Web/Web_Components/…
您是否在页面中添加了适当的视口元标记？ developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
该死的就是这样。至少这是一个简单的修复。 :)
@Robbie，抱歉，我不应该说无效，我的意思是存在潜在的兼容性问题，并且可能需要额外的 CSS 和/或 JS 以防止旧浏览器出现问题， stackoverflow.com/a/12611408/648350

标签： css flexbox

【解决方案1】：

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

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

没有元标记，在较小的设备上，浏览器只会像在桌面上一样呈现页面，因此文本大小非常小。

【讨论】：