Malfunction with float div does not match height value

I have a page using different table display values ​​trying to have my page body automatically fill in the space between the header and footer.

I have two divs floating left and right inside the body; the right floated div is set to "height: 100%" as I want to have an inset shadow which I use to visibly separate the content of both divs. This all works fine until the content in the left div is long enough to cause the page to require a scrollbar, once that happens the right floating div doesn't seem to respect its height value and returns to it the height is determined by the content.

jsFiddle where it works: http://jsfiddle.net/ec3upxk7/4/

And where does it stop working: http://jsfiddle.net/yw3vLess/2/

Here is the worker code:

HTML:

<div class="container">
    <header class="header">
        <p>This is the header</p>
    </header>
    <section class="content">
        <div class="content-body">
            <div class="left-panel">
                <p>This is the content.</p>
            </div>
            <div class="right-panel">
                <p>This is not the content.</p>
            </div>
        </div>
    </section>
    <footer class="footer">
        <p>This is the footer.</p>
    </footer>
</div>

      

        
        
        
      

    

CSS

/* Reset */
html, body { height: 100%; margin: 0; padding: 0; }

/* Essentials */
.container { display: table; }
.content { display: table-row; height: 100%; }
.content-body { display: table-cell; }

/* Aestetics */
.container { width: 100%; height: 100%; }
.header, .footer { padding: 10px 20px; background: #f7f7f7; }
.content-body { background: #e7e7e7; }

.left-panel {
    width: 50%;
    float: left;
}

.right-panel {
    width: 49.9%;
    height: 100%;
    float: right;
    box-shadow:
        inset 10px 0px 5px -7px rgba(0,0,0,0.5);
}