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.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    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);

<!-- language: lang-css -->

    .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;
    }

<!-- language: lang-html -->

    <div class="App">
      <aside>
        <div id='side'>
          sidebar
        </div>
      </aside>
      <main id='main'>
        <button id='mybutton'>
          show/hide
        </button> hola
      </main>
    </div>

<!-- end snippet -->