Html Css flex侧边栏幻灯片

我试图将侧边栏滑出并将内容拉过，但我的代码只执行前者。我也尝试过为内容设置动画，但它保持宽度，不会扩展

对flex来说是相当新的

HTML:

JS:

---

由于

transform

不会移动自身以外的任何其他内容，因此它不会推送

content

元素

一种选择是使用

左边距
来实现这一点


堆栈片段


$（“#切换”）。打开（'click'，函数（e）{
e、 预防默认值（）；
$（'.sidebar'）.toggleClass（'open'）；
});
body，
html{
身高：100%；
}
.包装纸{
位置：相对位置；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit盒方向：水平；
-webkit盒方向：正常；
-ms柔性方向：行；
弯曲方向：行；
身高：100%；
宽度：900px；
背景：蓝色；
保证金：自动；
溢出：隐藏；
}
.侧边栏{
位置：相对位置；
背景：绿色；
宽度：300px；
-webkit转换持续时间：.3s；
过渡时间：.3s；
左边距：-300px；
-webkit边框左上半径：4px；
-webkit边框左下半径：4px；
-左上角moz边界半径：4px；
-moz边框半径左下角：4px；
边框左上半径：4px；
边框左下半径：4px；
}
.侧边栏.打开{
左边距：0；
}
.内容{
背景：红色；
最小宽度：0；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
-ms-flex方向：列；
弯曲方向：立柱；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit-box-flex:1；
-ms-flex:1；
弹性：1；
}

每日小贴士和诀窍：
开课闭课
毫无意义。您只需要一个默认状态和一个特殊类。不是两个：）谢谢，它本来只有默认状态和特殊类，但我之前玩了一些东西，忘了放回去：）你能让我知道我的答案中缺少什么，这样我可以调整，你可以接受。
<div class="wrapper">
  <div class="sidebar open">

  </div>
  <div class="content">
    <a id="toggle" href="#">Toggle</a>
  </div>
</div>

body,
html {
  height: 100%;
}

.wrapper {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 100%;
  width: 900px;
  background: blue;
  margin: auto;
  overflow: hidden;
}

.sidebar {
  background: green;
  width: 300px;
  -webkit-transition-duration: .3s;
  transition-duration: .3s;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  -webkit-border-top-left-radius: 4px;
  -webkit-border-bottom-left-radius: 4px;
  -moz-border-radius-topleft: 4px;
  -moz-border-radius-bottomleft: 4px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.sidebar.open {
  position: static;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.sidebar.closed {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  //display: none;
}

.content {
  background: red;
  min-width: 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

$('#toggle').on('click', function(e) {
  e.preventDefault();
  $('.sidebar').toggleClass('open closed');
});