Nested flexbox columns with equal height, broken in google chrome

I want multiple sidebar boxes to be evenly spaced throughout a long post.

For this I am using Flexbox in the sidebar to handle the even spacing between blocks. This works great.

Pen code: http://codepen.io/jameswilson/pen/yyOLaz?editors=110

UPDATE: Working solution found, see Slawa Eremkin below for details!

Pen working code: http://codepen.io/jameswilson/pen/xbVVLL?editors=110

When I go to set equal column heights using the standard Equal Height column procedure with Flexbox, it only works in Firefox, not Chrome.

In Chrome, the only workaround I can think of is to use an equal height javascript fallback to manually set the height of the sidebar container to a fixed pixel height that matches the main column.

Is there some magic I'm missing in making this work in Chrome?

NOTE. I have no way to change the structure of the HTML, so the ideal solution would be CSS based only on the structure provided in the code.

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>

      

        
        
        
      

    

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