css - フッターのある App Style Layout で CSS calc() を使用する

Question

CSS calc() を使用して、下部にフッターがある App Style レイアウトを構築しようとしています。

主な CSS プレーヤー:

.content-container {
    height: calc(100% - 110px);
    background-color: red;
    overflow: hidden;
}

.left, .right {
    float: left;
    height: 100%;
}

.left {
    width: 70%;
    background-color: blue;
}

.right {
    width: 30%;
    background-color: yellow;
}

.right-content {
    overflow: auto;
    height: 100%;
    margin-bottom: 30px;
}

HTML の概要は次のとおりです。

<div class="content-container">
<div class="left">
    <h1>left</h1>
</div>
<div class="right">
    <div class="right-title">
        TITLE OF THE SECTION
    </div>
    <div class="right-content">
        <div class="group">
        </div>
    </div>
</div>
</div>
<div class="footer"></div>

ここで完全な例を表示してください: http://codepen.io/woocas/pen/MwyBGd?editors=110

.right div (黄色のもの) のオーバーフローが .content-container の高さになるようにしようとしています。

しかし、例でわかるように、スクロールバーは content-container によって割り当てられたスペースを超えています。フッターの裏です。

どんな助けでも大歓迎です。