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>