Как сделать так, чтобы меню когда выдвигалось меняло ширину контейнера с контентом?

Question

[ssintro]

Есть меню которое выдвигается вправо при наведении на него и есть div с контентом. Нужно чтобы меню не перекрывало контент, а меняло позицию левого края div с контентом

Вот собственно мой код:

<div class="menu">
          <h1>NAVIGATION</h1>
          <h1 class="menu-spoiler">MOVECURSORHERE</h1>
          <div class="list-menu">
            <ul style="list-style-type: none ;">
              <li>
                <button class="ripple-button" id="open-education">
                  Education
                </button>
              </li>
              <li>
                <button class="ripple-button" id="open-expirience">
                  Expirience
                </button>
              </li>
              <li>
                <button class="ripple-button" id="open-sideprojects">
                  Side Projects
                </button>
              </li>
              <li>
                <button class="ripple-button" id="open-scills">Scills & Tools</button>
              </li>
            </ul>
          </div>
        </div>
        <div class="main-content"></div>

.main-content{
  box-shadow: inset 0 0 50px #52057b, 0 0 50px #52057b;
  border: 6px solid #52057b;
  border-radius: 20px 70px;
  display: flex;
  position: absolute;
  top: 10;
  left: 90;
  bottom: 10;
  right: 10;
}

/* .sidebar {
  width: 200px;
  padding: 10px 10px 10px 10px;
  background-color: rgba(0, 255, 255, 0.359);
} */

.menu {
  width: 300px;
  height: 355px;
  padding: 25vh 50px;
  position: fixed;
  background-color: #37306b6d;
  border-right: 10px solid #61297d65;
  backdrop-filter: blur(3px);
  left: -400px;
  transition: all 0.3s ease;
  z-index: 1;
}

.menu:hover{
  left: 0;
  transition: all 0.3s ease;
}

.menu h1{
  font-family: 'Bruno Ace', cursive;
  font-size: 40px;
  font-weight:900;
  margin-bottom: 50px;
  color: #d26779;
  text-shadow: 0 0 15px #d26779;
}

.menu-spoiler {
  transform: rotate(90deg);
  position: absolute;
  left: 110px;
  letter-spacing: 10px;
  height: min-content;
}

.list-menu button{
  margin-bottom: 25px;
  max-height: max-content;
  width: max-content;
  border: none;
  background: none;
  font-family: 'Bruno Ace', cursive;
  font-size: 25px;
  color: #BC6FF1;
  text-shadow: 0 0 10px #BC6FF1;
  transition: all 0.2s ease;
}

.list-menu button:hover{
  padding-left: 15px;
  transition: all 0.2s ease;
}

.list-menu li {
  margin: 25px 0;  
}

.list-menu {
  /* background-color: #fff; */
  width: 300px;
}

Comments

[Алан Гибизов]

А как пробовали и что не получилось? Удобно показывать через codepen
<codepen src="http:/codepen_url"/>

[Ankhena]

Не используйте абсолют, оставляйте элементы в потоке и не будет перекрывать.
Можно гридом в две колонки.