ui router sliding side bar with flex - css

Question

I want to be able to have a side-bar slide in. I have almost gotten there but I am having issues with the main view snapping into place while the side bar slides in. I have created this Plunkr to demonstrate the problem I'm having. Notice how the body doesn't move with the side-panel. How can I make this work as I expect?
body:
<div class="container">
<div class="child">
<a href ui-sref="main.sidePanel">show side panel</a>
</div>
<div ui-view class="slide"></div>
</div>
side-panel:
<div class="side-panel-body">
<a href ui-sref="main">hide side panel</a>
</div>
css:
.container {
display: flex;
height: 400px;
padding: 20px 0;
}
.child {
background: yellow;
flex: auto;
}
.side-panel-body {
width: 400px;
height: 100px;
background: lightgray;
}
.slide.ng-enter,
.slide.ng-leave {
transition: all 2s ease;
}
.slide.ng-enter {
transform: translate(100%, 0);
}
.slide.ng-enter-active {
transform: translate(0, 0);
}
.slide.ng-leave {
transform: translate(0, 0);
}
.slide.ng-leave-active {
transform: translate(100%, 0);
}

Answer 1

Without going into too much detail about transformations. The easy answer is that translating a DOM element has no effect on other DOM elements.
So you have a flexbox with 2 divs in it. They're functioning as expected. When you expand the window, the left div expands to fill, as it's set to flex: auto, while the right div stays at 400px of fixed width.
When you transform: translate the righthand div, all you are doing is visually moving it. It's container, as well as the lefthand div, still consider it to be exactly where it started. That is, until you actually hide it or remove it. When the right hand div is hidden, then you can see the lefthand div fill up the flex-box.
So to achieve what you want, you'd need to either animate both divs, lefthand for size, and righthand for translation. Or actually change the width of the righthand div, allowing the transition: all 2s ease;to handle the animation for you.

Answer 2

Thanks to #CH Buckingham I came up with a solution. It's not exactly how I imagined, but it works just fine and really isn't THAT hacky. This allows you to toggle the sidebar with a scope variable but you can have the flexibility of content with ui-router.
<div class="container">
<div class="child">
<a href ui-sref="main.sidePanel">show side panel</a>
</div>
<div ng-show="showSidebar" class="sidebar">
<div ui-view class="uiview"></div>
</div>
</div>
css (less):
.container {
display: flex;
}
.child {
flex: auto;
}
.sidebar {
width: 1000px; // for some reason this acts more like a max-width for the sidebar. The actually width matches the size of the ui-view.
&.ng-hide-add, &.ng-hide-remove {
transition: all ease .8s;
overflow-x: hidden;
}
&.ng-hide {
width: 0;
}
}