Nested flexbox equal height columns broken in Google Chrome

问题

I want a number of sidebar blocks to be spaced evenly throughout a long post.

To achieve this I'm using Flexbox within the sidebar to handle the even spacing of the blocks. This works perfectly.

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

UPDATE: A working solution has been found, see Slawa Eremkin's answer below for details!

Working Code Pen: http://codepen.io/jameswilson/pen/xbVVLL?editors=110

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

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

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

NOTE: I don't have the luxury of changing the HTML structure, so an ideal solution would be CSS only based on the structure provided in the 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>

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

回答1:

Checkout my codepen: http://codepen.io/slawaEremin/pen/wBGBrj

The main idea is to use display: flex for the direct child (.l-sidebar) of the parent block (.l-container) and to use flex-basis: 100% instead of height: 100% in .l-sidebar-inner because Chrome doesn't understand the height: 100%;

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

回答2:

I moved the .l-sidebar-inner into the same div as the .l-main-inner and played with the nesting. It seems to be working for me in both now.

Here's my updated codepen

来源：https://stackoverflow.com/questions/27412929/nested-flexbox-equal-height-columns-broken-in-google-chrome