Reactjs 反应物料界面菜单溢出

如何使主要内容在此处正确移动。看起来我需要动态计算剩余保证金，或者这里的最佳解决方案是什么

最初看起来还可以：

但当菜单展开时：

或者在调整页面大小时：

---

我不知道什么是最佳实践，但这就是我解决类似问题的方法

假设您的内容如下所示

<div class="main">
    <Menu class="menu" />
    <Content class="content" />
</div>

最后两个类在菜单打开时设置

---

PS：移动设备的样式设置需要额外的类。

问题是我没有在正确的位置使用内容

根据这里的答案：

而且通过使用这个

我能解决这个问题。基本上，我没有在正确的位置输出内容。

答案如下：

.main {
    display: flex;
}

.menu {
    width: 10vw;
}

.content {
    width: 90vw;
}

.menu__open {
    width: 25vw;
}

.content__on-menu-open {
    width: 75vw;
}