Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="Flexbox">
  <div class="Flexbox-child"></div>
  <div class="Flexbox-child"></div>
</div>

<div class="Flexbox">
  <div class="Flexbox-child"></div>
  <div class="Flexbox-child"></div>
  <div class="Flexbox-child"></div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

.Flexbox {
  background: grey;
  margin-bottom:10px;
  width: 49%;
  float: left;
  height: 500px;
  display: flex;
  align-content: stretch;
  flex-direction: column;
  
  +.Flexbox {
    float: right;
  }
  
  &-child {
    min-height: 20px;
    flex: 1 1 auto;
    margin: 5px 0;
    
    &:first-child {
      margin-top:0;
    }
    
    &:last-child {
      margin-bottom:0;
    }
    
    
    &:nth-child(3n+1) {
      background: red;
    }
    
    &:nth-child(3n+2) {
      background: green;
    }
    
    &:nth-child(3n+3) {
      background: blue;
    }
  }
}

SassMeister-output.css

.Flexbox {
  background: grey;
  margin-bottom: 10px;
  width: 49%;
  float: left;
  height: 500px;
  display: flex;
  align-content: stretch;
  flex-direction: column;
}
.Flexbox + .Flexbox {
  float: right;
}
.Flexbox-child {
  min-height: 20px;
  flex: 1 1 auto;
  margin: 5px 0;
}
.Flexbox-child:first-child {
  margin-top: 0;
}
.Flexbox-child:last-child {
  margin-bottom: 0;
}
.Flexbox-child:nth-child(3n+1) {
  background: red;
}
.Flexbox-child:nth-child(3n+2) {
  background: green;
}
.Flexbox-child:nth-child(3n+3) {
  background: blue;
}

SassMeister-rendered.html

<div class="Flexbox">
  <div class="Flexbox-child"></div>
  <div class="Flexbox-child"></div>
</div>

<div class="Flexbox">
  <div class="Flexbox-child"></div>
  <div class="Flexbox-child"></div>
  <div class="Flexbox-child"></div>
</div>