<div class="div prose"><p>This is some Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas nesciunt error officia ratione nobis obcaecati earum magnam voluptate tenetur quas, perferendis iure, aspernatur odit exercitationem est repudiandae unde assumenda facere! Perferendis iure, aspernatur odit exercitationem est repudiandae unde assumenda facere!</p><p>Error officia ratione nobis obcaecati earum magnam voluptate tenetur quas, perferendis iure, aspernatur odit exercitationem est repudiandae unde assumenda facere!</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, laborum perferendis nisi illum maxime commodi rerum cupiditate deleniti doloremque maiores laboriosam asperiores dolor, magni velit debitis amet repellat praesentium sed.</p></div>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

/** CSS custom properties don't allow us to use custom properties
 * inside of media queries yet, so we'll use Sass to keep our code
 * dry. Even though it'd be _really_ cool if we could just use our
 * --aspect-ratio prop in the @media query
 */
$aspectRatio: "1/1";
$aspectRatio: "16/9";
$aspectRatio: "4/3";
$aspectRatio: "9/16";

.div {
  --aspect-ratio: calc(#{$aspectRatio});
  background: magenta;
  padding: 20px;
  overflow: auto;
}

@media (max-aspect-ratio: #{$aspectRatio}) {
  .div {
    width: calc(100vw - 100px);
    height: calc((100vw / var(--aspect-ratio)) - 100px);
  }
}

@media (min-aspect-ratio: #{$aspectRatio}) {
  .div {
    width: calc((100vh * var(--aspect-ratio)) - 100px);
    height: calc(100vh - 100px);
  }
}

.prose {
  p {
    margin-bottom: 1em;
  }
}



/** ATTEMPT 1 fixes the box at 50% of the viewport width,
 * it didn't grow correctly
 *
html {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.div {
  background: magenta;
  padding: 20px;
  width: 50vw;
  height: 50vw;
  overflow: auto;
}

.prose {
  p {
    margin-bottom: 1em;
  }
}
 */