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.
Puedes hacer lo siguiente, crear un contenedor que ocupará el 100% de tu pantalla + 236px, que es lo que estableciste para la barra lateral. Obviamente solo se mostrará en pantalla la parte del 100%, de manera que cuando quieras mostrar la barra lateral, agregues un margen de 236px y todo se mostrará en pantalla.
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);
*{margin:0;}
.App {
position: relative;
left: -236px;
display: flex;
flex-direction: row;
align-items: stretch;
height: 100vh;
color: white;
width: calc(100% + 236px);
}
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: margin-left .7s;
height: 100%;
width: 236px;
margin-left: 0;
}
aside div.closed {
margin-left: 236px;
}
<div class="App">
<aside>
<div id='side'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus nihil sunt nesciunt doloribus ullam inventore, laborum odit magnam cumque. Nostrum nihil voluptates ab dolores voluptas mollitia possimus facilis nemo consequuntur?
</div>
</aside>
<main id='main'>
<button id='mybutton'>
show/hide
</button> hola
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus nihil sunt nesciunt doloribus ullam inventore, laborum odit magnam cumque. Nostrum nihil voluptates ab dolores voluptas mollitia possimus facilis nemo consequuntur?
</main>
</div>