How can I smoothly slide a flexbox side panel offscreen? - css-transitions

Question

I have a fairly simple flex layout built on Angular Material. It has a side panel that can be slid offscreen. I'm currently using negative margins to handle that so that the main content box follows its movement with a width adjustment, which works well. However, this results in animation that's not smooth. Apparently it's more of a chore for the graphics rendering mechanism than translation.
How can I accomplish the same using translateX? Here's my demo layout:
<div ng-app="sandbox" layout="row" class="wrapper" ng-class="{'sidebar-out': sidebarOut}">
<div flex="60" class="main md-padding">
<h1>Main Content</h1>
<button class="toggler" ng-click="sidebarOut=!sidebarOut">Toggle sidebar</button>
</div>
<div flex="40" class="sidebar md-padding">
<h2>Sidebar</h2>
</div>
</div>
The sidebar movement is handled with simple Angular directives and CSS:
.sidebar-out .sidebar {
transform: translateX(40vw)
}
Fiddle demo
The problem is that the main content box doesn't adjust size as the sidebar translates off screen. How can I make that happen? Thanks heaps.

Answer 1

Does this help in anyway? - Fiddle
I think there may be a better way to do this bit though...
.sidebar-out .main {
transform: scaleX(1.7)
}
Markup
<div ng-app="sandbox" layout="row" class="wrapper" ng-class="{'sidebar-out': sidebarOut}">
<div id="newMain" flex="60">
<div id="mainContent">
<h1>Main Content</h1>
<button class="toggler" ng-click="sidebarOut=!sidebarOut">Toggle sidebar</button>
</div>
<div class="main md-padding">
</div>
</div>
<div flex="40" class="sidebar md-padding">
<h2>Sidebar</h2>
</div>
</div>
CSS
.wrapper {
background: pink;
overflow: hidden;
}
#newMain {
position: relative;
width: 100vw;
height: 100vh;
}
#mainContent {
position: absolute;
z-index: 1;
}
.sidebar,
.main {
height: 100vh;
}
.main {
background: #fff;
transition: all .5s;
transform-origin: 0 0;
}
.sidebar-out .main {
transform: scaleX(1.7)
}
.sidebar {
background: #ddd;
transition: all .5s;
}
.sidebar-out .sidebar {
transform: translateX(40vw)
}