我希望一些侧边栏块在整个长帖子中均匀分布。
为了实现这一点，我在侧边栏中使用 Flexbox 来处理块的均匀间距。这完美地工作。
代码笔：http ://codepen.io/jameswilson/pen/yyOLaz?editors=110
更新：找到了一个可行的解决方案，有关详细信息，请参阅下面的 Slawa Eremkin 的回答！
工作代码笔：http ://codepen.io/jameswilson/pen/xbVVLL?editors=110
当我使用标准的等高列程序和 Flexbox 设置等列高度时，它只适用于 Firefox，而不适用于 Chrome。
在 Chrome 中，我能想出的唯一解决方法是使用等高 javascript 后备来手动将侧边栏容器的高度设置为与主列匹配的固定像素高度。
关于在 Chrome 中进行这项工作，我是否缺少一些魔力？
注意：我没有更改 HTML 结构的奢侈，因此理想的解决方案是仅基于 Codepen 中提供的结构的 CSS。
HTML：
<div class="l-container">
<div class="l-prefix">
<div class="l-prefix-inner">
<p>This is a prefix column that spans the full width of the container. This block prevents properly using <code>display:table</code> to achieve equal height columns of the two regions below.</p>
</div>
</div>
<div class="l-main">
<div class="l-main-inner">
<p>Bacon ipsum dolor amet shoulder rump sirloin kevin picanha corned beef landjaeger, ball tip cow swine short ribs turkey alcatra pancetta bresaola. Porchetta sausage doner, jowl pig filet mignon corned beef spare ribs shank. Pig chuck swine, filet mignon pork salami shankle cupim porchetta hamburger capicola landjaeger sirloin ribeye. Filet mignon drumstick sirloin salami, ham hock tongue bacon. Pork meatball swine turducken.</p>
<p>Landjaeger andouille leberkas kielbasa flank, kevin corned beef tail jerky tri-tip hamburger pork ham hock. Spare ribs ground round short ribs, brisket tri-tip sirloin ham hock pork pork belly chicken drumstick picanha corned beef. Prosciutto cow capicola fatback jerky doner cupim rump pork loin. Salami pork loin hamburger pastrami boudin. Short ribs shoulder biltong, jowl picanha cupim ribeye leberkas. Shankle ball tip drumstick capicola boudin. Jerky ribeye sirloin strip steak, shoulder tongue brisket.</p>
<p>Chuck shank t-bone boudin meatloaf pork chop shankle tail leberkas capicola landjaeger tenderloin pork ball tip ribeye. Beef ribs capicola short loin salami, ground round frankfurter picanha chuck hamburger pancetta meatloaf tongue bacon turkey turducken. Beef short loin flank kielbasa boudin kevin capicola cupim jerky andouille doner. Doner sirloin short loin kielbasa strip steak.</p>
</div>
</div>
<div class="l-sidebar">
<div class="l-sidebar-inner">
<div class="block">
Beef ribs.
</div>
<div class="block">
Chuck shank.
</div>
<div class="block">
Jerky ribeye.
</div>
<div class="block">
Salami pork loin.
</div>
</div>
</div>
</div>
和 SCSS：
// Implement equal height columns
// on adjacent layout regions.
.l-container {
display: flex;
flex-wrap: wrap;
}
// Implement vertically-spaced
// sidebar blocks.
.l-sidebar-inner {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.l-sidebar .block {
margin-bottom: 20px;
padding: 10px;
background: #6a6;
flex-wrap: nowrap;
flex: 0 1 auto;
&:last-of-type {
margin-bottom: 0;
}
}
// Layout styles only below this point.
.l-container {
width: 600px;
margin: 0 auto;
}
.l-prefix {
width: 600px;
clear: both;
float: left;
}
.l-main {
width: 70%;
float: left;
background: #eea;
}
.l-sidebar {
width: 30%;
float: left;
background: #aea;
}
.l-main-inner,
.l-prefix-inner {
padding: 0 1em;
}