Scroll within a fixed position overlay

Loading...

Scroll within a fixed position overlay

JsBin. Click the buttons on the left. The first one is an example of an overlay that doesn't require a scroll (so it works perfectly), the second button does nothing, and the third button is the problem I'm describing. Note that I copied/pasted the ZenPen style before the main style in the css tab.
I'm using Bootstrap 3.0 and ZenPen. The idea is that I have a menu on the left side of the screen where you can click a button to hide and show different 'applications' or overlays. These overlays are using position: fixed, but I can't do that for the ZenPen overlay or else I won't be able to scroll within it.
If I change #wordInner { position: fixed; to #wordInner { position: absolute; instead, it will be able to scroll, but it won't take up the entire page (instead centered in the middle of a screen like a normal container class. In the JsBin, it's on position: absolute, but change it to see the problem I'm talking about.
The logic behind my code is that I use a col-lg-12, and style that same div so that it will take the entire page (because a width: 100% obviously won't work.)
Main css:
#wrap {
    position: relative;
}
#main {
    position: relative;
}

ZenPen's css (a link to the default ZenPen css):
#word {
    overflow: hidden;
    text-shadow: none;
}

#word b, #word strong {
    color: #000;
}

#wordInner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    padding: 5px;
    /* because nav is about 100 px, zenpen's icon menu is about 65px */
    padding-left: 165px;
}

#word {
    overflow-y: scroll;

-webkit-transition: all 600ms;
-moz-transition: all 600ms;
-ms-transition: all 600ms;
-o-transition: all 600ms;
    transition: all 600ms;
}

#word section {
    height: 100%;
    margin: auto;
}

And relevant html (link to ZenPen html: ZenPen html):