css - 2 つの div を並べて中央に配置するが、1 つの div の位置は固定されている

Question

ページの中央に並べて表示したい 2 つの div を持つコンテナーがあります。左側は一種のナビゲーションで、右側は可変長のコンテンツになります。ページを上下にスクロールするときに、左の div を「固定」したかったのです。一般的な構造は次のとおりです。他のセンタリング css を提案してください。前もって感謝します。

#content{
  margin: 0 auto;
}
#left{
  display:inline-block;
}
#right{
  display:inline-block;
}

<div id="content">
  <div id="left">
  </div>
  <div id="right">
  </div>
</div>