foundation-sites/scss/xy-grid/_frame.scss

/// Modifies a grid to give it "frame" behavior (no overflow, no wrap, stretch behavior)
///
/// @param {Boolean} $vertical [false] - Is grid vertical or horizontal. Should match grid.
/// @param {Boolean} $nested [false] - Is grid nested or not. If nested is true this sets the frame to 100% height, otherwise will be 100vh.
/// @param {Number|Map} $gutters [null] - Map or single value for gutters.
/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from.
/// @param {Boolean} $include-base [true] - Include the base styles that don't vary per breakpoint.
@mixin xy-grid-frame(
  $vertical: false,
  $nested: false,
  $gutters: null,
  $breakpoint: null,
  $include-base: true
) {

  @if $include-base {
    overflow: hidden;
    position: relative;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  @if $breakpoint == null and type-of($gutters) == 'map' {
    @include -zf-each-breakpoint() {
      @include xy-grid-frame($vertical, $nested, $gutters, $-zf-size, false);
    }
  } @else {
    // Get our gutters if applicable
    $gutter: -zf-get-bp-val($gutters, $breakpoint);

    // If we have a gutter, add it to the width/height
    @if $gutter {
      @if $vertical == true {
        $unit: if($nested == true, 100%, 100vh);
        $gutter: rem-calc($gutter);
        height: calc(#{$unit} + #{$gutter});
      } @else {
        $unit: if($nested == true, 100%, 100vw);
        $gutter: rem-calc($gutter);
        width: calc(#{$unit} + #{$gutter});
      }
    }
    @else {
      @if $vertical == true {
        height: if($nested == true, 100%, 100vh);
      } @else {
        width: if($nested == true, 100%, 100vw);
      }
    }
  }
}

/// Modifies a cell to give it "block" behavior (overflow auto, inertial scrolling)
///
/// @param {Boolean} $vertical [false] - Is grid vertical or horizontal. Should match grid.
@mixin xy-cell-block(
  $vertical: false
) {
  $property: if($vertical == true, 'overflow-y', 'overflow-x');

  @if $vertical == true {
    overflow-y: auto;
    max-height: 100%;
  } @else {
    overflow-x: auto;
    max-width: 100%;
  }

  -webkit-overflow-scrolling: touch;
  -ms-overflow-stype: -ms-autohiding-scrollbar;
}

/// Container for inside a grid frame containing multiple blocks. Typically used
/// as a modifier for a `.cell` to allow the cell to pass along flex sizing
/// constraints / from parents to children.
@mixin xy-cell-block-container() {
  display: flex;
  flex-direction: column;
  max-height: 100%;

  > .grid-x {
    max-height: 100%;
    flex-wrap: nowrap;
  }
}