Skip to main content
se añadieron 234 caracteres en el cuerpo
Origen Enlace
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í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>

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>

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>

Origen Enlace
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>