@import url('https://necolas.github.io/normalize.css/8.0.0/normalize.css');

​

*,

*::before,

*::after {

  box-sizing: inherit;

  -webkit-flex-shrink: 0;

  flex-shrink: 0;

}

​

html {

  box-sizing: border-box;

  min-height: 100%;

}

​

html,

body {

  display: flex;

  flex-direction: column;

  flex: 1 0 auto;

  overflow-y: scroll;

}

​

.mm {

  display: flex;

  flex-flow: row nowrap;

}

.mm-fill {

  display: flex;

  flex-flow: row nowrap;

​

  /* pulled from my other absolute stacking non-losing flow component */

  margin-right: -100%;

  width: 100%;

​

  overflow: hidden;

}

​

.mm-fill::before,

.mm-fill::after {

  content: '';

  display: block;

  width: 100%;

  visibility: hidden;

  margin-right: -100%;

}

​

/*

// firefox (not sure of spec) doesn't allow vert padding to take % value from width

// if height set to 0 WHEN parent nodes display property is set to flex...

// so it needs display set to 'table' for padding to set height

*/

.mm-fill::before {

  display: table;

}

/*

// firefox has issue with min-height when display: table, so only set to ::before

// could also be related to the parents display set to flex

*/

.mm-fill--asp1x4::before  { padding-bottom: 400%; }

.mm-fill--asp1x3::before  { padding-bottom: 300%; }

.mm-fill--asp1x2::before  { padding-bottom: 200%; }

​

.mm-fill--asp2x1::before  { padding-bottom: calc((1 / 2) * 100%); }

.mm-fill--asp2x3::before  { padding-bottom: calc((3 / 2) * 100%); }

.mm-fill--asp2x5::before  { padding-bottom: calc((5 / 2) * 100%); }

​

.mm-fill--asp3x1::before  { padding-bottom: calc((1 / 3) * 100%); }

.mm-fill--asp3x2::before  { padding-bottom: calc((2 / 3) * 100%); }

.mm-fill--asp3x4::before  { padding-bottom: calc((4 / 3) * 100%); }

.mm-fill--asp3x5::before  { padding-bottom: calc((5 / 3) * 100%); }

.mm-fill--asp3x7::before  { padding-bottom: calc((7 / 3) * 100%); }

.mm-fill--asp3x8::before  { padding-bottom: calc((8 / 3) * 100%); }

​

.mm-fill--asp4x1::before  { padding-bottom: calc((1 / 4) * 100%); }

.mm-fill--asp4x3::before  { padding-bottom: calc((3 / 4) * 100%); }

.mm-fill--asp4x5::before  { padding-bottom: calc((5 / 4) * 100%); }

.mm-fill--asp4x7::before  { padding-bottom: calc((7 / 4) * 100%); }

.mm-fill--asp4x9::before  { padding-bottom: calc((9 / 4) * 100%); }

.mm-fill--asp4x11::before { padding-bottom: calc((11 / 4) * 100%); }

.mm-fill--asp4x13::before { padding-bottom: calc((13 / 4) * 100%); }

.mm-fill--asp4x15::before { padding-bottom: calc((15 / 4) * 100%); }

​

.mm-fill--asp8x1::before  { padding-bottom: calc((1 / 8) * 100%); }

.mm-fill--asp8x3::before  { padding-bottom: calc((3 / 8) * 100%); }

.mm-fill--asp8x5::before  { padding-bottom: calc((5 / 8) * 100%); }

.mm-fill--asp8x7::before  { padding-bottom: calc((7 / 8) * 100%); }

​

.mm-fill--asp10x1::before  { padding-bottom: calc((1 / 10) * 100%); }

.mm-fill--asp10x2::before  { padding-bottom: calc((2 / 10) * 100%); }

.mm-fill--asp10x3::before  { padding-bottom: calc((3 / 10) * 100%); }

.mm-fill--asp10x4::before  { padding-bottom: calc((4 / 10) * 100%); }

.mm-fill--asp10x6::before  { padding-bottom: calc((6 / 10) * 100%); }

.mm-fill--asp10x7::before  { padding-bottom: calc((7 / 10) * 100%); }

.mm-fill--asp10x8::before  { padding-bottom: calc((8 / 10) * 100%); }

.mm-fill--asp10x9::before  { padding-bottom: calc((9 / 10) * 100%); }

​

.mm-fill--asp16x1::before  { padding-bottom: calc((1 / 16) * 100%); }

.mm-fill--asp16x3::before  { padding-bottom: calc((3 / 16) * 100%); }

.mm-fill--asp16x5::before  { padding-bottom: calc((5 / 16) * 100%); }

.mm-fill--asp16x7::before  { padding-bottom: calc((7 / 16) * 100%); }

.mm-fill--asp16x9::before  { padding-bottom: calc((9 / 16) * 100%); }

.mm-fill--asp16x11::before { padding-bottom: calc((11 / 16) * 100%); }

.mm-fill--asp16x13::before { padding-bottom: calc((13 / 16) * 100%); }

.mm-fill--asp16x15::before { padding-bottom: calc((15 / 16) * 100%); }

​

.mm-fill--asp16x9::before  { padding-bottom: calc((9 / 16) * 100%); }

.mm-fill--asp21x9::before  { padding-bottom: calc((9 / 21) * 100%); }

​

.mm-fill--min10v::after  { min-height: 10vh; }

.mm-fill--min20v::after  { min-height: 20vh; }

.mm-fill--min30v::after  { min-height: 30vh; }

.mm-fill--min40v::after  { min-height: 40vh; }

.mm-fill--min50v::after  { min-height: 50vh; }

.mm-fill--min60v::after  { min-height: 60vh; }

.mm-fill--min70v::after  { min-height: 70vh; }

.mm-fill--min80v::after  { min-height: 80vh; }

.mm-fill--min90v::after  { min-height: 90vh; }

.mm-fill--min100v::after { min-height: 100vh; }

.mm-fill--min1r  { min-height: 1rem; }

.mm-fill--min2r  { min-height: 2rem; }

.mm-fill--min3r  { min-height: 3rem; }

.mm-fill--min4r  { min-height: 4rem; }

.mm-fill--min5r  { min-height: 5rem; }

.mm-fill--min6r  { min-height: 6rem; }

.mm-fill--min7r  { min-height: 7rem; }

.mm-fill--min8r  { min-height: 8rem; }

.mm-fill--min9r  { min-height: 9rem; }

.mm-fill--min10r { min-height: 10rem; }

.mm-fill--min11r { min-height: 11rem; }

.mm-fill--min12r { min-height: 12rem; }

.mm-fill--min13r { min-height: 13rem; }

.mm-fill--min14r { min-height: 14rem; }

.mm-fill--min15r { min-height: 15rem; }

.mm-fill--min16r { min-height: 16rem; }

.mm-fill--min17r { min-height: 17rem; }

.mm-fill--min18r { min-height: 18rem; }

.mm-fill--min19r { min-height: 19rem; }

.mm-fill--min20r { min-height: 20rem; }

.mm-fill--max10v  { max-height: 10vh; }

.mm-fill--max20v  { max-height: 20vh; }

.mm-fill--max30v  { max-height: 30vh; }

.mm-fill--max40v  { max-height: 40vh; }

.mm-fill--max50v  { max-height: 50vh; }

.mm-fill--max60v  { max-height: 60vh; }

.mm-fill--max70v  { max-height: 70vh; }

.mm-fill--max80v  { max-height: 80vh; }

.mm-fill--max90v  { max-height: 90vh; }

.mm-fill--max100v { max-height: 100vh; }

​

/*

p or 'percent' min/max classes can only be used when 'mm' has height explicitly set on it, otherwise there will be nothing for percent to key off, remember different than using viewport/scrollport v classes, and not rems, these are outermost container, and max will clip, until native min()/max() methods are avail, when you could use to not clip content

*/

​

/* might swap all classes to be on mm base then have 2 level class specificity for the fill node :/ */

.mm--min10p  { min-height: 10%; }

.mm--min20p  { min-height: 20%; }

.mm--min25p  { min-height: 25%; }

.mm--min30p  { min-height: 30%; }

.mm--min40p  { min-height: 40%; }

.mm--min50p  { min-height: 50%; }

.mm--min60p  { min-height: 60%; }

.mm--min70p  { min-height: 70%; }

.mm--min75p  { min-height: 75%; }

.mm--min80p  { min-height: 80%; }

.mm--min90p  { min-height: 90%; }

​

/* not sure if max-height is a good practice even if it works :/ because it's on the outer container if anything, not on the fill which would allow pushing of 'overflowed' content */

.mm--max10p  { max-height: 10%; }

.mm--max20p  { max-height: 20%; }

.mm--max25p  { max-height: 25%; }

.mm--max30p  { max-height: 30%; }

.mm--max40p  { max-height: 40%; }

.mm--max50p  { max-height: 50%; }

.mm--max60p  { max-height: 60%; }

.mm--max70p  { max-height: 70%; }

.mm--max75p  { max-height: 75%; }

.mm--max80p  { max-height: 80%; }

.mm--max90p  { max-height: 90%; }

.mm--max100p { max-height: 100%; }

​

.mm-content {

  display: flex;

  flex-direction: column;

  justify-content: center;

  width: 100%;

  /* all this is in case of multiple stacking content nodes? */

  margin-right: -100%;

  pointer-events: none;

}

.mm-content > * {

  pointer-events: auto;

}

​

​

.hero {

  background-color: #f00;

  background: #f00 url('//placekitten.com/700/400');

  background-size: cover;

  color: #fff;

}

​

​

​

​

​