Bourbon Neat: How to expand a column to fit an external container?

Question

I am testing Bourbon Neat and I have two columns inside the outer container and I want the columns to be equal in height (as tall as the tallest column). Using @include fill-parent in a short column does not work, it just makes it as wide as an outer-container. I could do it in javascript, but does it cope with this?

Here is 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 bidness time">-->
    <p>It bidness time</p>
</aside>

And here is 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 align the size of the column, but let me know if there is a Neater way (haha) to get around this.

Answer 1

, , : 100%.

:

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%

Answer 2

, . , , min-height.

:

.blog {
  height: 100%;
  aside {
    min-height: 100%;
  }
}           

.

Answer 3

fill-parent only makes the full width, not the full height of its container. This 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