Equal Heights Flexbox Fallback

gistfile1.txt

/**
 * Set divs to equal heights.
 */
function equalheight(selector, bypassCheck) {
  if (($(window).width() > 720) && ((bypassCheck == 1) || !(Modernizr.flexbox) || !(Modernizr.flexboxlegacy))) {
    var maxHeight = 0;
    $(selector).each(function(){
      if ($(this).height() > maxHeight) { 
        maxHeight = $(this).height(); 
      }
    });
    $(selector).height(maxHeight);
  }
}

$(window).resize(function() {
    equalheight("#mini-panel-home_page_get_involved > div > div", 0);
    equalheight(".pane-article-list-featured-articles .view-content > ul > li", 0);
    equalheight(".project-teaser", 1); // Flexbox cannot work in this case, so add a bypassCheck = 1
});

$(window).load(function() {
    equalheight("#mini-panel-home_page_get_involved > div > div", 0);
    equalheight(".pane-article-list-featured-articles .view-content > ul > li", 0);
    equalheight(".project-teaser", 1); // Flexbox cannot work in this case, so add a bypassCheck = 1
});

gistfile2.scss

/**
 * Use flexbox for equal heights when available.
 */
#mini-panel-home_page_get_involved {
  @include breakpoint($breakpoint-medium) {
    // Insert non-flexbox legacy css here
    .flexboxlegacy & { // IE10
        display: -ms-flexbox;
    }
    .flexbox & {
        display: flex;
    }
  }
}