如何设置一个css元素的高度并使另一个元素与其宽度匹配？

Question

我有两个HTML内联SVG。我希望第一个占据视口高度的50％，第二个位于视口下方以匹配宽度（与高度无关）。可以使用纯CSS（没有javascript）完成此操作吗？

svg {
  display: block;
}

.container {
  // should this be a grid layout?
  // should I be setting min-content?
}

.top {}

.bottom {}

#svg-1 {
  max-height: 50vh;
}

<div class="container">
  <div class="top">
    <svg id="svg-1" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin meet">
      <polygon points="0,0 100,0 100,100 0,100" fill="none" stroke="black" stroke-width="1"/>
    </svg>
  </div>
  <div class="bottom">
    <svg id="svg-2" viewBox="0 0 100 200" preserveAspectRatio="xMinYMin meet">
      <polygon points="0,0 100,0 100,200 0,200" fill="none" stroke="black" stroke-width="1"/>
    </svg>
  </div>
</div>