flex-flow column with side-by-side divs in body

試圖做一個帶有header，body和footer的柱狀柔性盒，然後在體內有兩個並排的尊重柔性盒邊界的div（即don不會溢出頁腳）。flex-flow column with side-by-side divs in body

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%; 
}

簡單的測試案例中的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/