issue with using % units while using them to set the height and with

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  background: #6A44F2;
}

.rulesContainer {
  display: flex;
  flex-direction: column;
  background: white;
  height: 80%;
  width: 30%;
  margin: 10% 35%;
  padding: 1vh 1vw;
}

.rulesContainer {
  display: flex;
  flex-direction: column;
  background: white;
  height: 80vh;
  width: 30vw;
  margin: 10vh 35vw;
  padding: 1vh 1vw;
}