materio-d8/web/themes/custom/materiotheme/assets/styles/base/_layout.scss

body, html{
  position: relative;
  width: 100%;
  height:100%;
  font-family: sans-serif;
  font-style: normal;
  margin:0;
  padding:0;
}
body{
  overflow-x:hidden;
}

div.dialog-off-canvas-main-canvas{
  width: 100vw;
  height:100vh;
  display: flex;
  flex-direction: column;
}

body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs{
  padding-top: 24px!important;
}

// build break points for each multiple of cards row
// cards will always be centered, using all available space
%grided-width{
  margin:0 auto;
  $m: $column_goutiere;
  $colw: $column_width;
  $bp: $colw + $m;
  @while  $bp < 4096px {
    $upbp: $bp + $colw + $m;
    @media only screen and (min-width: $bp + 1px) and (max-width: $upbp) {
      width:$bp;
    }
    $bp: $upbp;
  }
  // outline:1px blue solid;
  // &>*{
  //   outline:1px red solid;
  // }
}


//  _  _             _
// | || |___ __ _ __| |___ _ _
// | __ / -_) _` / _` / -_) '_|
// |_||_\___\__,_\__,_\___|_|

header[role="banner"]{
  flex:0 0 auto;
  background-color: #fff;
  // overflow: visible;
  // position: fixed;
  // z-index: 20;
  width:100vw;
  // height: $header_height;
  .wrapper{
    @extend %grided-width;
    // box-sizing:border-box;
    background-color: #fff;

    &:after{
      content:"";
      clear:both;
      display: block;
    }

    .header-block{
      min-height: 15px;
      font-size: 0;
      &.header-right{
        text-align: right;
      }
      &>*{
        display: inline-block;
        vertical-align:top;
        font-size: $base_font_size;
        text-align: left;
      }
    }
  }
}



//  __  __      _
// |  \/  |__ _(_)_ _
// | |\/| / _` | | ' \
// |_|  |_\__,_|_|_||_|

main[role="main"]{
  flex:1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  >.scroller{
    width:100vw;
    >.wrapper{
      @extend %grided-width;
      display: flex;
      flex-direction: row-reverse;
      #content-left{
        flex-basis: $column_width;
        flex-shrink: 0;
        // width:$column_width*2+$column_goutiere;
        >*{
          width:100%;
          box-sizing: border-box;
          padding:0.5em $column_goutiere;
        }
      }
      #content-center{
        flex-basis: 110%;
      }
    }
  }
}