Bourbon Neat: How to expand column to match outer-container? - sass

Question

I'm testing out Bourbon Neat, and I have two columns within an outer-container, and I want the columns to be equal height (so as tall as the tallest column). Using #include fill-parent on the short column doesn't work, it just makes it as wide as the outer-container. I could do it in javascript, but doesn't Neat handle this?
Here's my html:
<section class="blog">
<article>
<h1>How to set up Bourbon Neat</h1>
<h2>Installing and using Bourbon</h2>
<p>Install bourbon by going to your users directory in git bash, and typing: gem install bourbon</p>
<p>Then change directory to your style folder and type in git bash: bourbon install</p>
<p>Then, import the mixins at the top of your stylesheet(s): #import 'bourbon/bourbon'</p>
<h2>Installing and using Neat</h2>
<p>Install neat by going to your users directory in git bash, and typing: gem install neat</p>
<p>Then change directory to your style folder and type in git bash: install neat</p>
<p>Then, import the mixins at the top of your stylesheet(s): #import 'bourbon/bourbon'</p>
</article>
<aside>
<!--<img src="style/images/cupman.gif" alt="It's bidness time">-->
<p>It's bidness time</p>
</aside>
And here's my SASS: `
$visual_grid: true
$visual-grid-color: blue
$visual-grid-index: front
$visual-grid-opacity: 0.1
#import 'bourbon/bourbon'
#import 'neat/neat'
#import 'variables'
///////////////////////////
html
#include linear-gradient(black, gray)
height: 100%
body
background-color: $baseColor
font-family: $type
body *
-webkit-box-sizing: border-box
-moz-box-sizing: border-box
box-sizing: border-box
//////////////////////////////
.blog
#include outer-container
aside
#include span-columns(4)
background: $thirdColor
//height: 100%
//#include fill-parent()
article
#include span-columns(8)
background-color: $fourthColor
padding: 5px
margin-top: 40px
background-color: $secondColor
`
Thanks for reading.
EDIT: For now, I'm just using jQuery to manually equalize column size, but let me know if there's a Neater way (haha) to go about this.

Answer 1

One solution to equal column height is making all parents to height:100%.
Using your example:
html, body
height: 100%
.blog
#include outer-container
height: 100%
aside
#include span-columns(4)
background: $thirdColor
height: 100%
article
#include span-columns(8)
background-color: $fourthColor
padding: 5px
height:100%
This should work

Answer 2

To control the height of a child you first need to set its parent's height. Then if you want to have both with the same height, just use the min-height property.
Like the following:
.blog {
height: 100%;
aside {
min-height: 100%;
}
}
and it should work.

Answer 3

fill-parent only makes it full width, not full height of its container. It is equivalent to this:
.element {
width: 100%;
// Also sets box-sizing if global $border-box-sizing is set to 'false'
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Source