Css3 columns horizontal overflow - html

Question

I'm having trouble trying to get a desired page layout to work by using HTML5/CSS3 only (without needing JavaScript).
The basic concepts are...
A page with a header and body (static).
The body has several "sections" which each have a header and body (static).
The sections flow from left-to-right (you scroll the page body horizontally to see the sections if they overflow).
The sections have a fluid height and width (height adjusts to the size of the page body, width adjusts based on the contents or a min of 300px).
The fields within the section body flow from top-to-bottom. When there is overflow, the fields overflowing should move to a new column and the section body should expand dynamically. The should not be broken apart if they overflow to a new column (the label and input should be moved together).
NOTE: I'm testing in IE11 currently but ultimately the solution should be functional in the latest Chrome/FF/IE/Safari versions.
I can't seem to get the section body to expand when the fields overflow into new columns while still retaining the column behavior.
HTML:
<div class="container">
<div class="header">Header</div>
<div class="body">
<div class="section">
<div class="sectionheader">Section 1</div>
<div class="sectionbody">
<div class="field">
<label>Field 1</label>
<input type="text" />
</div>
<!-- NOTE: repeat field element to create 5 or more fields... -->
</div>
</div>
<!-- NOTE: repeat section element to create more sections... -->
</div>
</div>
CSS:
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
html, body, .container {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
background-color: gray;
overflow: hidden;
}
.header {
height: 150px;
background-color: red;
}
.body {
position: absolute;
top: 150px;
bottom: 0;
left: 0;
right: 0;
white-space: nowrap;
vertical-align: top;
padding: 40px;
overflow-x: auto;
overflow-y: hidden;
}
.section {
min-height: 200px;
height: 100%;
border: 2px solid red;
margin-right: 40px;
display: inline-block;
min-width: 300px;
position: relative;
vertical-align: top;
}
.sectionheader {
height: 40px;
color: white;
font-size: 20pt;
padding-left: 5px;
}
.sectionbody {
white-space: normal;
border: 2px solid blue;
padding-top: 10px;
color: white;
height: calc(100% - 40px);
column-count: auto;
-webkit-column-count: auto;
column-width: 320px;
-webkit-column-width: 320px;
column-fill: auto;
-webkit-column-fill: auto;
}
.field {
margin: 0 10px 10px 10px;
width: 300px;
display: inline-block;
}
.field label {
font-size: 12px;
line-height: 20px;
display: block;
}
.field input {
width: 100%;
font-size: 16px;
line-height: 20px;
height: 40px;
padding-left: 5px;
}
Here is the fiddle: http://jsfiddle.net/t7kQ4/7/
(drag the handle to adjust the height of the result pane to trigger the field overflow)

Answer 1

Does this help: http://jsfiddle.net/t7kQ4/10/
You need to remove the calc you are performing and allow it to be auto.
section {
height:auto;
}
.sectionbody {
height:auto;
}