Question

I have an aside (sidebar) and I’m trying to break it up into 3 sections equally.
Here’s what it looks like:

This is my html:

        <aside id="sidebar">
            <div id="side_events">
                Events
            </div>
            <div id="side_trailer">
                Trailer
            </div>
            <div id="side_advertisement">
                Advertisement
            </div>                    
        </aside>

This is the majority of my CSS:

* {
    margin: 0px;
    padding:0px;
}
header, section, footer, aside, nav, article, hgroup{
    display: block;
}
body{
    width: 100%; /*always specify this when using flexBox*/ 
    height:100%;
    display: -webkit-box;
    text-align:center;
    -webkit-box-pack:center; /*way of centering the website*/
    background-image:url('bg2.jpg');
}
#wrapper{
    max-width: 850px;
    display: -webkit-box; /*means this is a box with children inside*/
    -webkit-box-orient:vertical;
    -webkit-box-flex: 1; /*allows site to grow or shrink 1 = flex 0 = statix*/
    background-color: #B137D6;
}
#body_div{
    display: -webkit-box;
    -webkit-box-orient:horizontal;
    color:#000000;
}
#main_section{
    border:1px solid blue;
    -webkit-box-flex: 1; 
    margin: 20px;
    padding: 3px;
}
#sidebar{
    width: 210px;
    height: 100%;
    margin: 20px;
    padding: 0px;
    background: #999999;
    border:#FF0000 1px solid;
}
#side_events,
#side_trailer,
#side_advertisement{
    height:33.333%;
}
#side_events{
    background:#102A50;
    display:block;
}
#side_trailer{
    background:#173B72;
    display:block;
}
#side_advertisement{
    background:#296CD0;
    display:block;
}

Answer 1

You just need to set the #sidebar childs height to 100%/3 = 33.333%, but to achieve this you need also to set html and body tags height to 100%:

body,
html {
  height: 100%;
}

#side_events,
#side_trailer,
#side_advertisement{
    height:33.333%;
}

Most of the time you have to apply a 100% height to the parent DIV to get this working.