两个布局重叠时不溢出

Question

我有一个响应式媒体视图，我已经实现了滑动功能。我有两个布局（asideFilters和content-results），我可以切换到一个或另一个。当我滑动到旁边的内容时，内容结果布局会留在asideFilters后面。这是正确的，但它也溢出了过滤器。

如果我使用JavaScript将内容结果设置为display: none，则asideFilters布局也会消失，所以我只看到页脚。如果打开asideFilters，我怎样才能使内容结果不会溢出，而不会影响asideFilters？

这是我的代码：

<div class= "row outer">

  // asideFilters layout, that is positioned to the left off screen 
  <div class= "aside-filters-medium inner">
  </div>
  // content-results layout, that is the view when DOMContentLoad
  <div class= "head-content-results">
  </div>
  <div class="content-results">
  </div>
</div>

<style>
  .outer {
    overflow: hidden;
    position: relative; 
   }

  .inner {
    position: absolute;
    left: -100vw;
    width: 100%;
    z-index: 5; 
   }
</style>