问一个关于 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