Greedy Container with Fixed Aspect Ratio

demo of how to create a container that stays at a specific aspect ratio well still taking up as much space as possible

by abbey Reisle

HTML

<div class="wrapper">
  <div class="greedy wrapper"><p>container with fixed aspect ratio of 5/4 that expands to take up as much of the available space as it can</p></div>
</div>

SCSS

* {
  box-sizing: border-box;
}
/* not necessary, just to centre container */
html, body, .wrapper {
  width: 100%;
  height: 100%;
}
.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* styles to set containers size and aspect ratio */
.greedy {
  border: 3px solid red;
  /* height is 4/5 width */
  width: 100vw;
  height: 80vw;
  padding: 10%;
}

@media only screen and (min-aspect-ratio: 5/4) {
  .greedy {
    /* width is 5/4 height */
    width: 125vh;
    height: 100vh;
  }
}