CSS боковая панель с flexbox и stati c ширина

Question

Я пытаюсь реализовать боковую панель со stati c width и flexbox. У меня есть две проблемы:

1. Когда боковая панель закрыта, остается место, и я не понимаю, откуда она.
2. Сторона main не анимированные. Это было выдвинуто без анимации.

Вот мой код:

const aside = document.querySelector('aside');

document.querySelector('button').addEventListener('click', () => {
  aside.classList.toggle('open');
})

* {
  box-sizing: border-box;
}

section {
  display: flex;
  height: 100vh;
}

main {
  overflow-y: auto;
  flex: 1;
  background: red;
}

aside {
  background: hotpink;
  padding: 10px;
  flex: 0;
  transition: transform 0.3s cubic-bezier(0, 0, 0.3, 1);
  transform: translateX(-100%);
}

aside.open {
  flex: 0 0 250px;
  transform: translateX(0%);
}

<section>
  <aside>
    Sidebar content
  </aside>
  <main>
    <button>Toggle</button>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio illum sed neque molestias nihil deserunt facilis voluptatibus recusandae vero necessitatibus quas id consectetur similique, architecto voluptates officia obcaecati, corporis dolor?
    </p>

  </main>
</section>

Answer 1

Вместо этого вы можете попробовать анимировать поля.

const aside = document.querySelector('aside');

document.querySelector('button').addEventListener('click', () => {
  aside.classList.toggle('open');
})

* {
  box-sizing: border-box;
}

section {
  display: flex;
  height: 100vh;
  overflow:hidden;
}

main {
  overflow-y: auto;
  flex: 1;
  background: red;
  transition: transform 0.3s cubic-bezier(0, 0, 0.3, 1);
}

aside {
  background: hotpink;
  width:250px;
  padding: 10px;
  margin-left:-250px;
  transition: margin 0.3s cubic-bezier(0, 0, 0.3, 1);
}

aside.open {
  margin-left:0px;
}

<section>
  <aside>
    Sidebar content
  </aside>
  <main>
    <button>Toggle</button>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio illum sed neque molestias nihil deserunt facilis voluptatibus recusandae vero necessitatibus quas id consectetur similique, architecto voluptates officia obcaecati, corporis dolor?
    </p>

  </main>
</section>

Answer 2

добавить преобразование: translateX (-17%) к основному

 main {
    overflow-y: auto;
    flex: 1;
    background: red;
    transform: translateX(-17%);
}

Answer 3

Посмотрите, работает ли это. Удалите текущие стили из этих классов и попробуйте это:

aside {
    background: hotpink;
    width: 0px;
    transition: width 0.3s ease;
}

aside.open {
    width: 200px;
    padding: 10px;
}

Если вы действительно хотите использовать саму flex: вы можете сделать это следующим образом

aside {
  background: hotpink;
  padding: 10px;
  flex: 0;
  transition: transform 0.3s cubic-bezier(0, 0, 0.3, 1);
  transform: translateX(-100%);
}

aside.open {
 flex: 0 0 250px;
 transform: translateX(0%);
}

, а также указать поле: 0 на ваше тело, чтобы удалить наценку.