在Google Chrome中嵌套的flexbox等高列 [英] Nested flexbox equal height columns broken in Google Chrome

问题描述

我想要一些边栏块在整个长篇文章中均匀分布。

为了实现这一点，我在边栏中使用Flexbox来处理均匀间距的块。这工作完美。

代码笔：

主要思想是对父块（.l-container）的直接子（.l-sidebar）使用 display：flex <1> c： flex-basis：100％而不是 height：100％了解高度：100％;

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

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

解决方案

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

这篇关于在Google Chrome中嵌套的flexbox等高列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！