Переключение боковой панели - основное содержимое не растягивается на всю ширину при переключении боковой панели

Question

У меня есть макет с боковой панелью и основным содержимым внутри родительского элемента, называемого оболочкой, и кнопка для переключения боковой панели, которая позиционируется абсолютно относительно боковой панели. Но основное содержимое не остается в полной ширине, когда боковая панель закрыта. Я смог выяснить, что исправление боковой панели решит проблему, но я не хочу, чтобы она была исправлена. Есть ли способ добиться этого, не фиксируя положение боковой панели. Я использовал translate для переключения боковой панели.

Jsfiddle - https://jsfiddle.net/wu1zfg35/

Вот css. рабочий код можно найти в js ссылка на скрипт

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);
}

Answer 1

Убрать ширину: 350 пикселей; из .sidebar и добавьте его в .wrapper.sidebar-open .sidebar

Таким образом, код будет

.sidebar {
    width: 0;
}

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