vertical scaling with vh units

by Soviut

HTML

<div class="container">
  <div class="child">
    <div class="item">testing</div>
    <div class="item">testing</div>
    <div class="item">testing</div>
  </div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
  
  font-family: arial, helvetica, san-serif;
}

.container {
  background: cornflowerblue;
}

.child {
  background: red;
  width: 56.25vh;
  height: 100vh;
  margin: 0 auto;
}

.item {
  padding: 1vh 2vh;
  margin-bottom: 1vh;

  font-size: 3vh;
  background: salmon;
}