Flex box same height with background colour

_flex.scss

.flex-wrapper {

  &:before,
  &:after {

      display: block;

  }

  &, .flex-item {
    
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    
  }
  
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;

  .flex-item {

    .flex-container {

      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1 0 auto;
      flex: 1 0 auto;
      
      width: 100%;
      padding: 1rem;
        
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;

      &.bg-white {

          background-color: #fff;

      }

    }

  }

}

Example with Zurb Foundation grid (non flex one) would be

<div class="row flex-wrapper">

    <div class="large-4 medium-6 columns flex-item">
        <div class="flex-container bg-white">
             // content
        </div>
    </div>
    <div class="large-4 medium-6 columns flex-item">
        <div class="flex-container bg-white">
            // content
        </div>
    </div>
    <div class="large-4 columns flex-item">
        <div class="flex-container bg-white">
            // content
        </div>
    </div>

</div>