overflow auto doesn't work on mobile devices

Question

I have a problem with overflow-auto . This property is working very well in laptop/desktop but it is not working on mobile devices.

https://bdevg.com/articles/Testing%20overflow%20in%20mobile%F0%9F%8F%83%E2%80%8D%E2%99%80%EF%B8%8F%205f9a2c91f4c1090008e5237f
Open the above page in mobile view or on any mobile device. You can notice this add a scrollbar at the bottom of Overflow...Overflow...Overflow...Overflow...Over.... in laptop/desktop view. But, it doesn't add the same scrollbar at the bottom of Overflow...Overflow...Overflow...Overflow...Over.... in mobile view, instead, it makes the whole page scrollable including header and footer.

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

This code adds overflow scroll property. You can edit the in-browser dev console.

Thanks for your time.

Answer 1

You need to give your class="MuiContainer-maxWidthSm" a default value

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

Answer 2

TRY THIS

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