Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.1.0)
// ----

@import "bourbon/bourbon";

.dashbox {
    @include display(flex); // be a flex container
    @include flex-direction(row); // lay children out horizontally
    @include flex-wrap(wrap); // allow wrapping
    .shell { // now for the children
        @include flex(1 1 auto); // be flexible (grow, shrink, auto basis)
        @include display(flex); // our children are also flex parents themselves
        &.shell-greedy { // greedy boxes, these take up a whole row no matter what
            @include flex(1 0 100%); // grow, don't shrink, 100 basis
        }
        &.shell-contexts {
            @include flex(0 1 28em); // we allow this component to shrink down to 28em and not grow (don't grow shrink 28em basis)
        }
        .box { // within shell, basically same concept as min-height:100%
            @include display(flex); // be a flex container
            @include flex-direction(column); // lay "children" (it is the only child) out vertically
            @include flex(1 1 auto); // be flexible (grow shrink auto basis)
        }
    }
}

SassMeister-output.css

.dashbox {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  box-orient: horizontal;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  flex-direction: row;
  -ms-flex-direction: row;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  .dashbox .shell {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1 1 auto;
    -moz-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex; }
    .dashbox .shell.shell-greedy {
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      box-flex: 1;
      -webkit-flex: 1 0 100%;
      -moz-flex: 1 0 100%;
      -ms-flex: 1 0 100%;
      flex: 1 0 100%; }
    .dashbox .shell.shell-contexts {
      -webkit-box-flex: 0;
      -moz-box-flex: 0;
      box-flex: 0;
      -webkit-flex: 0 1 28em;
      -moz-flex: 0 1 28em;
      -ms-flex: 0 1 28em;
      flex: 0 1 28em; }
    .dashbox .shell .box {
      display: -webkit-box;
      display: -moz-box;
      display: box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -moz-box-orient: vertical;
      box-orient: vertical;
      -webkit-flex-direction: column;
      -moz-flex-direction: column;
      flex-direction: column;
      -ms-flex-direction: column;
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      box-flex: 1;
      -webkit-flex: 1 1 auto;
      -moz-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
      flex: 1 1 auto; }