Javascript 侧边栏切换-侧边栏切换时，主内容不会延伸到全宽

我有一个布局，在一个叫做wrapper的父元素中有边栏和主要内容，还有一个按钮来切换边栏，边栏相对于边栏是绝对定位的。但是当侧边栏关闭时，主要内容并不是保持全宽。我能够发现，将边栏设置为“固定”可以解决问题，但我不想将其设置为“固定”，有没有一种方法可以在不为边栏设置“固定位置”的情况下实现这一点。我用translate来切换侧边栏

Jsfiddle-

这是css。工作代码可以在js fiddle链接中找到

body {
  margin: 0;
}

.wrapper{
  display: flex;
  height: 100vh;
}

.sidebar {
  position: relative;
  /* position: fixed;  */
  width: 350px;
  height: 100%;
  background-color: red;
  transition: all 0.5s ease 0s;
  -webkit-transition: all 0.5s ease 0s;
  -webkit-transform: translate3d(-100%, 0px, 0px);
  transform: translate3d(-100%, 0px, 0px);
}

.main-content {
  width: 100%;
  background-color: yellow;
  transition: all 0.5s ease 0s;
  -webkit-transition: all 0.5s ease 0s;
}

.hide-customize-tab {
  position: absolute;
  display: flex;
  top: 50%;
  right: -25px;
  align-items: center;
  justify-content: center;
  height: 25px;
  width: 25px;
  background-color: black;
  transition: all 0.5s ease 0s;
  -webkit-transition: all 0.5s ease 0s;
  cursor: pointer;
}

.hide-customize-tab .close-button {
  display: none;
  height: 10px;
  width: 7px;
}
.hide-customize-tab .open-button {
  height: 10px;
  width: 7px;
}

.wrapper.sidebar-opened .sidebar {
  -webkit-transform: translate3d(0px, 0px, 0px);
  transform: translate3d(0px, 0px, 0px);

}

.wrapper.sidebar-opened .sidebar .hide-customize-tab {
  right: -15px;
}

.wrapper.sidebar-opened .sidebar .hide-customize-tab .open-button {
  display: none;
}

.wrapper.sidebar-opened .sidebar .hide-customize-tab .close-button {
  display: block;
}

.wrapper.sidebar-opened .main-content {
  /* margin-left: 350px; */
  width: calc(100% - 350px);
}

---

移除宽度：350px；从.sidebar添加到.wrapper.sidebar-opened.sidebar

所以代码是

.sidebar {
    width: 0;
}

.wrapper.sidebar-opened .sidebar {
    width: 350px;
}