【问题标题】：overflow auto doesn't work on mobile devices溢出自动在移动设备上不起作用
【发布时间】：2021-02-11 12:12:06
【问题描述】：

overflow-auto 有问题。此属性在笔记本电脑/台式机上运行良好，但不适用于移动设备。

https://bdevg.com/articles/Testing%20overflow%20in%20mobile%F0%9F%8F%83%E2%80%8D%E2%99%80%EF%B8%8F%205f9a2c91f4c1090008e5237f
在移动视图或任何移动设备上打开上述页面。您可以注意到这在笔记本电脑/台式机视图中Overflow...Overflow...Overflow...Overflow...Over.... 的底部添加了一个滚动条。但是，它不会在移动视图中在Overflow...Overflow...Overflow...Overflow...Over.... 的底部添加相同的滚动条，而是使整个页面可滚动，包括页眉和页脚。

.tui-editor-contents pre {
    margin: 2px 0 8px;
    padding: 18px;
    overflow: auto;
    background-color: #f5f7f8;
}

此代码添加了溢出滚动属性。您可以编辑浏览器内的开发控制台。

感谢您的宝贵时间。

【问题讨论】：

标签： html css overflow

【解决方案1】：

你需要给你的 class="MuiContainer-maxWidthSm" 一个默认值

.MuiContainer-root {
max-width: 600px;
}

【讨论】：

如果用户将在宽度为 400px 或更小的移动设备上查看此页面，那么它将添加一个滚动条。相对宽度不起作用。
试试rem，如果不设置固定宽度，页面就不会出现你需要的样式

【解决方案2】：

试试这个

.tui-editor-contents pre {
    margin: 2px 0 8px;
    padding: 18px;
    overflow: auto;
    background-color: #f5f7f8;
    hieght:100%;
    width:100%;
}

【讨论】：

width:100% 不起作用。但是设置width:300px 是有效的。这种方法的问题是，我需要在每个视口上设置宽度。