动态添加javascript元素时的计算比例

Question

从服务器加载数据并动态添加Material-UI卡时，屏幕内容略大。该内容在safari-mobile以外的所有浏览器中均可正常运行。在safari mobile中，我有一个非常大的第二滚动条，可将应用程序屏幕滚动出。

DOM结构如下：

HTML -> body -> root(div) -> main

我试图：

1）在所有容器中添加以下角色

overflow: hidden;
height: 100vh;

2）在加载完成且setState完成之后更改DOM元素

 this.setState({...},
                () => {
                    const doc = document.getElementById("main");
                    const roote = doc.parentElement;
                    const body = roote.parentElement;
                    const html = body.parentElement;

                    doc.overflow = "hidden";
                    doc.height = 0 / "100vh" / "100%" ...;
                    // same for all the others
                }
            ); 

以下是该问题的屏幕截图：

关于如何避免这种情况的任何建议？