I am looking to evenly space several sidebar blocks throughout a lengthy post.
To achieve this, I have utilized Flexbox within the sidebar for handling the even distribution of the blocks and it has been working flawlessly.
Check out Code Pen: http://codepen.io/jameswilson/pen/yyOLaz?editors=110
UPDATE: We have discovered a functional solution, refer to Slawa Eremkin's answer below for details!
Working Code Pen: http://codepen.io/jameswilson/pen/xbVVLL?editors=110
However, when attempting to set equal column heights using a standard Equal Height column procedure with Flexbox, it seems to only work in Firefox, not Chrome.
In Chrome, my only workaround so far is to resort to an equal-height javascript fallback to manually set the height of the sidebar container to match the fixed pixel height of the main column.
Is there something crucial that I might be overlooking to make this function seamlessly in Chrome?
NOTE: As I can't modify the HTML structure, an ideal solution would involve CSS alone based on the provided Codepen structure.
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...
</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;
}