css - 固定幅のサイドバーが 3 つ以上の定義された列を使用する

Question

susy で固定位置要素を使用しているときに少し問題があります。位置が固定されている要素は、グリッドではなくビューポートを基準にしてサイズ設定されることを知っています。しかし、私はこの問題を解決する方法がわかりません。

問題を示すためにペンを作成しました。

http://codepen.io/emjay/pen/vEabNQ

これが私のsusy構成です：

$susy: (
    columns: 12,
    gutters: 1/4,
    math: fluid,
    output: float,
    gutter-position: after,
    global-box-sizing: border-box,
    debug: (
        image: show-columns,
        output: overlay,
        toggle: top right,
      ),
);

そしてここに私のコード：

HTML:

  <div id="pageWrapper">
    <div id="sidebar">
      <p>
        Header
      </p>
      <p>
        Navigation
      </p>
    </div>
    <div id="content">
      <h1>
        This is just a Test Headline to demonstrate this problem
      </h1>
      <p>
        Lorem ipsum dolor sit amet, ...
      </p>
    </div>
  </div>

SCSS:

  body{
    background-color: black;
  }

  #pageWrapper{
    @include container(1200px left);
  }

  #sidebar{
    @include span(3 of 12 wide);
    background-color: white;
    margin-right: 0; // remove gutter on the right side

    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  #content{
    @include span(9 of 12 last);
    background-color: white;
    height: 1300px; //for testing
    color: white;
  }

  h1{
    background-color: red;
  }

ウィンドウが 1200px より大きい場合、サイドバーは定義された 3 列よりも多くのスペースを使用することがわかります。

誰かがそれを修正する方法を知っていることを願っています。:)