我觉得这应该很容易，但我无法得到它。我有一个左列，可以是20到2000像素高。然后，我有一个混合的内容：表格，（可选浮动div），文本和图像用于页面的其余部分。
我希望在侧栏旁边根据需要包装多行。然后当侧栏完成包装将占用空间。我在JSFiddle上有一个示例，它演示了这个问题。
我原本以为带有左浮柱的弹性容器会这样，但它不起作用。
https://jsfiddle.net/heegar/c40wf28c/
CSS
.flexContainer {
display: flex;
width: 740px;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
}
.blue {
background-color: blue;
min-height: 25px;
width: 240px;
}
.green {
background-color: green;
min-height: 40px;
width: 490px;
}
.yellow {
background-color: yellow;
min-height: 90px;
width: 240px;
}
.orange {
background-color: orange;
width: 240px;
min-height: 30px;
}
.red {
background-color: red;
text-align: left;
vertical-align: top;
font-size: .8em;
float: left;
width: 240px;
}
.CadetBlue {
background-color: CadetBlue;
min-height: 40px;
width: 490px;
}
.GoldenRod {
background-color: GoldenRod;
width: 240px;
min-height: 30px;
}
.layoutAuto {
table-layout: auto;
}
.DataTableWithBorder {
width: 100%;
border-collapse: collapse;
border: 1px solid black;
}
.blackback {
background-color: black;
}
HTML
<body style="width:740px;">
<div class="flexContainer">
<div class="red">
<h3 style="color:#FFFFFF; font-size:11px; background-color:#383838; padding-left:8px; margin:10px 0px 1px 0px;">Ocular History</h3>
<span style="font-weight:bold; padding-top:5px;">headaches</span>
<br />
<h3 style="color:#FFFFFF; font-size:11px; background-color:#383838; padding-left:8px; margin:10px 0px 1px 0px;">Ocular Surgical History</h3>
<span style="font-weight:bold; padding-top:5px;">corneal</span>
<br /><span style="font-weight:bold; padding-top:5px;">injection(s) of</span>
<br /><span style="font-weight:bold; padding-top:5px;">lid procedure of·ectropion repair</span>
<br /><span style="font-weight:bold; padding-top:5px;">NLD probing</span>
<br />
<h3 style="color:#FFFFFF; font-size:11px; background-color:#383838; padding-left:8px; margin:10px 0px 1px 0px;">Vitals</h3>
<span style="font-weight:bold; padding-top:5px;">Temp: 98.8 Deg Fer</span>
<br /><span style="font-weight:bold; padding-top:5px;">Pulse: a 101 bpm</span>
<br /><span style="font-weight:bold; padding-top:5px;">Blood Pressure: Sys what? Dia what?</span>
<br /><span style="font-weight:bold; padding-top:5px;">Respiratory Rate: huh? bpm</span>
<br /><span style="font-weight:bold; padding-top:5px;">Weight: 199 Lizards</span>
<br /><span style="font-weight:bold; padding-top:5px;">Height: 515 Red Ants</span>
<br /><span style="font-weight:bold; padding-top:5px;">BMI: 21.18 egg</span>
<br /><span style="font-weight:bold; padding-top:5px;">Blood Glucose Level: bgl 233 vh</span>
<br />
</div>
<div class="green">
Section 1 - should NOT auto fill to bottom of Red column
</div>
<div class="yellow">
Section 2 - should move under section 1 and to the right of the red column
</div>
<div class="orange">
Section 3 - should move next to Section 2
</div>
<div class="blue">
<h3 style="color:#FFFFFF; background-color:#383838; padding-left:8px; margin:10px 0px 0px 0px;">Hertel</h3>
<strong>Base</strong> 91mm
<br /><strong>OD</strong> 18mm <strong>OS</strong> 23mm
</div>
<div class="GoldenRod">
<h3 style="color:#FFFFFF; background-color:#383838; padding-left:8px; margin:10px 0px 0px 0px;">Amsler Grid</h3>
<table>
<tr>
<td class="BoldText top">OS</td>
<td>
<table class="amslerTable layoutFixed">
<tr>
<td class="blackback"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="blackback"> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="blackback"> </td>
<td> </td>
</tr>
<tr>
<td class="blackback"> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="blackback"> </td>
<td> </td>
</tr>
<tr>
<td class="blackback"> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="blackback"> </td>
<td> </td>
</tr>
<tr>
<td class="blackback"> </td>
<td class="blackback"> </td>
<td class="blackback"> </td>
<td class="blackback"> </td>
<td class="blackback"> </td>
<td class="blackback"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="blackback"> </td>
<td> </td>
</tr>
</table>
</td>
<td class="BoldText top">OD</td>
<td>
<table class="amslerTable layoutFixed">
<tr>
<td class="blackback"> </td>
<td class="blackback"> </td>
<td class="blackback"> </td>
<td class="blackback"> </td>
<td class="blackback"> </td>
<td class="blackback"> </td>
</tr>
<tr>
<td class="blackback"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="blackback"> </td>
</tr>
<tr>
<td class="blackback"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="blackback"> </td>
</tr>
<tr>
<td class="blackback"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="blackback"> </td>
</tr>
<tr>
<td class="blackback"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="blackback"> </td>
</tr>
<tr>
<td class="blackback"> </td>
<td class="blackback"> </td>
<td class="blackback"> </td>
<td class="blackback"> </td>
<td class="blackback"> </td>
<td class="blackback"> </td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="green">
sample data
</div>
<div class="orange">
<h3 style="color:#FFFFFF; background-color:#383838; padding-left:8px; margin:10px 0px 0px 0px;">Visual Acuity</h3>
<table class="stripedTable DataTableWithBorder layoutFixed">
<tr class="BoldText">
<td> </td>
<td>CC</td>
<td>SC</td>
<td>PH</td>
</tr>
<tr>
<td class="BoldText">OD</td>
<td>20/25</td>
<td>20/20</td>
<td>20/15</td>
</tr>
<tr>
<td class="BoldText">OS</td>
<td>20/25</td>
<td>20/20</td>
<td>20/15</td>
</tr>
<tr>
<td class="BoldText">OU</td>
<td>20/25</td>
<td>20/20</td>
<td> </td>
</tr>
</table>
<br />Test Used: Sn
</div>
<div class="blue">
blah blah blah
</div>
<div class="CadetBlue">
<h3 style="color:#FFFFFF; background-color:#383838; padding-left:8px; margin:10px 0px 0px 0px;">Auto Refraction</h3>
<strong>Age:</strong> 299 quarter days <strong>Purpose:</strong> justa type
<table class="">
<tr>
<td class="BoldText">OD</td>
<td>-1.50</td>
<td>+0.75</td>
<td>x 11</td>
<td>VaD 20/28/10</td>
<td>VaN 20/2</td>
</tr>
<tr>
<td class="BoldText">OS</td>
<td>-3.00</td>
<td>+1.00</td>
<td>x 154</td>
<td>VaD 20/48/13</td>
<td>VaN 20/2</td>
</tr>
</table>
</div>
</div>
</body>