html {
  height: 100%;
}

[ion-app] {
  @include flex-display();
  @include flex-direction(column);

  overflow: hidden;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;

  .nav-viewport {
    // container of many .nav-views, each .nav-view contains one view
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;

    @include flex-display();
    @include flex-direction(column);
  }

  .toolbar-container {
    // container of many toolbars for each view in the .nav-viewport
    position: relative;
    width: 100%;
    min-height: 50px;
  }

  .toolbar {
    // one view's toolbar, sibling to many view toolbars insde of .toolbar-container
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .nav-pane-container {
    // container of many .nav-pane's, each one containing one view
    position: relative;
    @include flex(1);
    @include flex-order($flex-order-view-content);
  }

  .tab-pane-container {
    // container of each content for each tab component within a tabs component
    @include flex(1);
    position: relative;
    width: 100%;
    @include flex-order($flex-order-view-content);
  }

  .nav-pane {
    // container of one ion-view
    position: absolute;
    width: 100%;
    height: 100%;
    background: white;
  }

  .nav-pane-cover-parent {
    // .nav-pane that should completely cover siblings and parent
    top: -50px;
    height: 100vh;
  }

  ion-view {
    // user created view, contained by .nav-pane
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
  }

  ion-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .scroll-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }

}