Google Chrome中已嵌套的嵌入式flexbox等高列

Question

我希望在长篇文章中均匀分布多个侧边栏。

为实现这一点，我在侧边栏中使用Flexbox来处理块的均匀间距。这非常有效。

密码笔：http://codepen.io/jameswilson/pen/yyOLaz?editors=110

更新：找到了一个有效的解决方案，详见下文Slawa Eremkin的答案！

工作代码笔：http://codepen.io/jameswilson/pen/xbVVLL?editors=110

当我使用Flexbox的标准Equal Height列程序设置相等的列高度时，它仅适用于Firefox，而不适用于Chrome。

在Chrome中，我能想到的唯一解决方法是使用等高的javascript后备来手动将侧边栏容器的高度设置为与主列的高度匹配的固定像素高度。

我是否缺少一些关于在Chrome中使用此功能的魔法？

注意：我没有改变HTML结构的优点，因此理想的解决方案是CSS仅基于Codepen中提供的结构。

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

Answer 1

结帐我的代码：http://codepen.io/slawaEremin/pen/wBGBrj

主要思想是将display: flex用于父块（.l-container）的直接子（.l-sidebar），并使用flex-basis: 100%代替height: 100% .l-sidebar-inner因为Chrome无法理解高度：100％;

.l-sidebar {
  display: flex;
}
.l-sidebar-inner {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Answer 2

我将.l-sidebar-inner移动到与.l-main-inner相同的div中并使用嵌套进行播放。现在两者似乎都在为我工作。

这是我更新的codepen