固定位置使左侧导航宽度变小

Question

我有一个容器，其中还有两个容器 1.发票侧边栏容器 2.发票内容

我之前在SASS中制作了发票侧边栏容器，就像这样：

.invoice-sidebar-container {
  $invoice-sidebar-background: #363636;
  $invoice-sidebar-border: #3d3d3d;

  $invoice-sidebar-active: $header-bg-color;

  position: relative;
  background-color: $invoice-sidebar-background;

  .invoice-sidebar {
    > ul {
      margin: 0;
      padding: 0;
      list-style: none;

      > li a {
        display: inline-block;
        width: 100%;
        padding: 20px;
        border-bottom: 1px solid $invoice-sidebar-border;
        color: $white;
        text-decoration: none;
        box-sizing: border-box;

        &.active,
        &:hover {
          background-color: $invoice-sidebar-active;
        }

        &.dispute {
          &.active,
          &:hover {
            background-color: $ar-red-5;
          }
        }
      }
    }
  }
}

以及.invoice-content和.invoice-section的CSS如下：

 .invoice-content {
  $invoice-content-background: #f4f4f4;
  padding: 20px;
  background-color: $invoice-content-background;
}

.invoice-section {
  $invoice-value-unavailable-color: rgb(221, 44, 0);

  margin-bottom: 20px;
  border: 1px solid $default-border;
  background-color: $white;

现在，当我尝试固定左侧导航时，我发现右侧的发票内容就在发票侧栏的背面。

此外，左侧导航固定不变，但宽度却随着位置的偏移而丢失。

我应该在这两者之间使用哪种组合，以使左侧导航不会松动其宽度，而内容也不会出现在背面。

HTML是这样的：

<div class="invoice-container" layout="row" ng-if="!modal.loading && !modal.error">
    <div class="invoice-sidebar-container" flex="20">
      <div class="invoice-sidebar" affix parent="#modal-container">
        <ul>
        all the li items here
        </ul>
      </div>
    </div>
    <div class="invoice-content" flex="80">
      <div class="invoice-section-content" layout="row">
      <div class="invoice-section-content" layout="row">
      <div class="invoice-section-content" layout="row">
    </div>