Skip to main content
1 de 2
Jaime
  • 7.3k
  • 2
  • 11
  • 23

Tu contenedor main se desborda porque lo estás trasladando 236 píxeles a la derecha. La propiedad translateX no modifica su ancho, simplemente lo mueve a la derecha, por lo que a menos que reduzcas su ancho, su width permanecerá igual.

Una mejor solución sería que el main, se comprimiera o expandiera automático dependiendo del espacio disponible. Para ello puedes declarar el aside con position: relative y animar su ancho. Te ahorrarás el código que le agregas al main para ajustarlo y te quedará todo más organizado.

Cuando el aside se muestra, tendrá un ancho 236px y cuando se oculta, tendrá un ancho de 0px. Así de simple puedes lograr el efecto que deseas.

Te adjunto un demo con tu código.

let sidebar = document.getElementById("side");
let main = document.getElementById("main");
let button = document.getElementById("mybutton");

button.addEventListener("click", function(e) {
  sidebar.classList.toggle('closed');
}, false);
.App {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: 100vh;
  color: white;
}

main {
  background: black;
  border: 2px solid #f4c;
  flex: 1;
  transform: translateX(0px);
  transition: transform .7s;
}


aside>div {
  background-color: #000000;
  position:relative;
  top: 0;
  transition: width .7s;
  height: 100%;
  width: 0;
 
}

aside div.closed {
  width: 236px;
}
<div class="App">
  <aside>
    <div id='side'>
      sidebar
    </div>
  </aside>
  <main id='main'>
    <button id='mybutton'>
      show/hide
    </button> hola
  </main>
</div>

Jaime
  • 7.3k
  • 2
  • 11
  • 23