ボディ内にサイドバイサイドdivを持つフレックスフローカラム

Question

ヘッダー、ボディーおよびフッターを含む列フレックスボックスを実行してから本体内にフレックスボックスの境界を考慮して2つのdivを並べて表示します（つまり、フッタをあふれさせる）。 jsfiddle

<div class='app'> 
    <div class='header'> 
    <p><b>header</b> 
     <br /> 
     <br />(sized to content)</p> 
    </div> 
    <div class='body'> 
    <div class='inner'> 

     <div class='left'> 
     <p>test 1</p> 
     <p>test 1</p> 
     <p>test 1</p> 
     <p>test 1</p> 
     <p>test 1</p> 
     <p>test 1</p> 
     <p>test 1</p> 
     <p>test 1</p> 
     <p>test 1</p> 
     <p>test 1</p> 
     <p>test 1</p> 
     <p>test 1</p> 
     <p>test 1</p> 
     <p>test 1</p> 
     <p>test 1</p> 
     <p>test 1</p> 
     </div> 
     <div class='right'> 
     <p>test 2</p> 
     <p>test 2</p> 
     <p>test 2</p> 
     <p>test 2</p> 
     <p>test 2</p> 
     <p>test 2</p> 
     <p>test 2</p> 
     <p>test 2</p> 
     <p>test 2</p> 
     <p>test 2</p> 
     <p>test 2</p> 
     </div> 
    </div> 

    </div> 
    <div class='footer'> 
    <p><b>footer</b> (fixed height)</p> 
    </div> 
</div> 

https://jsfiddle.net/XJ45G19/9e7vjykv/

で

html, 
body { 
    height: 100%; 
    margin: 0; 
} 

.app { 
    display: flex; 
    flex-flow: column; 
    height: 100%; 
} 

.header { 
    flex: 0 1 auto; 
    border-style: solid; 
    border-width: 1px; 
    border-color: blue; 
} 

.body { 
    display: flex; 
    flex-flow: column; 
    flex: 1 1 auto; 
    overflow-y: auto; 
    border-style: solid; 
    border-width: 1px; 
    border-color: red; 
} 

.footer { 
    flex: 0 1 40px; 
    border-style: solid; 
    border-width: 1px; 
    border-color: green; 
} 

.inner { 
    position: absolute; 
} 
.left { 
    float: left; 
    width: 200px; 
    height: 100%; 
} 

.right { 
    margin-left: 225px; 
    height: 100%; 
} 

簡単なテストケース私が間違っているつもりです任意のアイデア？前もって感謝します！

Answer 1

投稿：

.innerからposition: absoluteを削除します。

Answer 2

.body要素の中にはオーバーフローがありません。コンテンツが絶対配置されているため、通常のフローから削除されます。

.innerからposition: absoluteを削除すると、コンテンツが空き領域になり、垂直スクロールバーが.bodyに表示されます。答えとして要求ごと