Need for parent min

HTML

<body>
  <div id="main">
    <div class="wrapper">
      <div class="one-by-one aspect-ratio"></div>
      <div class="content">
        <div class="circle">
        </div>
      </div>
    </div>
  </div>
  <div id="leftPanel">
  </div>
</body>

CSS

body {
  height: 100vh;
  padding: 0;
  margin: 0;
}

div#leftPanel {
  height: 100%;
  width: 20%;
  position: absolute;
  left: 0;
  margin: 0;
  background: red;
}

div#main {
  height: 100%;
  width: 80%;
  position: absolute;
  right: 0;
  margin: 0;
  background: yellow;
}

.wrapper {
  position: relative;
  width: 100%;
  background: rgba(0, 255, 0, 0.3);
}

.one-by-one.aspect-ratio {
  padding-bottom: 100%;
}

.wrapper > .content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10%;
}

.circle {
  position: relative;
  height: 100%;
  border: dashed 1px;
  border-radius: 50%;
}