问一个关于 CSS 的问题：侧栏固定

是这样的，我希望使整个页面分为两栏，左栏固定，右栏随页面滚动。纯 CSS 实现。

-------------------------
|       |               |
|       |               |
|   -   |       ↕       |
|       |               |
|       |               |
-------------------------

用 positon: fixed 可以做到这个效果，但是添加了自适应之后就不行了，这究竟是为啥子？

代码如下：

# HTML
<div class="container">
	<div class="aside"></div>
	<div class="main"></div>
</div>

# CSS
.container {
  display: flex;
  width: 100%;
}
.aside {
  width: 300px;
  position; fixed;
}
.main {
  width: 100%;
  margin-left: 300px;
}

@media (max-width: 768px) {
  .main {
    margin-left: 0;
  }
  .side {
    display: none;
  }
}

或者说有啥更好的办法没（最好是 CSS 的）？

补充以下效果：

当宽度大于 768px 时一切正常，左栏固定，右栏可以滚动；

当宽度小于 768px 时，左栏消失，但是右栏还是存在 300px 的 margin-left