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íaPuedes hacer lo siguiente, crear un contenedor que ocupará el main100% de tu pantalla + 236px, 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 maines lo que estableciste para ajustarlo y te quedará todo más organizadola barra lateral.
Cuando el aside Obviamente solo se muestramostrará en pantalla la parte del 100%, tendrá un ancho 236px
yde manera que cuando se ocultaquieras mostrar la barra lateral, tendráagregues un ancho de 0px
. Asímargen de simple puedes lograr el efecto que deseas236px 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: widthmargin-left .7s;
height: 100%;
width: 0;236px;
margin-left: 0;
}
aside div.closed {
widthmargin-left: 236px;
}
<div class="App">
<aside>
<div id='side'>
Lorem sidebaripsum 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>