html - 保持宽高比并防止 <div> 扩展

Question

我有一个 <div>我试图在其中保持恒定的纵横比(因为内部元素需要是正方形)。我已经能够设计出 CSS，以便当您使窗口变小 时，高度会相应地缩小并且效果很好。然而，当我使窗口更宽时，<div>不断扩大超出 parent 的高度。我怎样才能阻止这个 .BoardWrapper <div>从扩展到它的父级？

.BoardWrapper {
    width: 100%;
    padding-bottom: 50%;
    position: relative;
    border: 1px solid red;
}

.Board {
    position: absolute;
    top: 5px; bottom: 5px; left: 5px;right: 5px;
    border: 1px solid green;
}

.Left {
    height: 100%;
    position: absolute;
    left: 0; right: 30px;
    border: 1px solid blue;
}

.Right {
    height: 100%;
    width: 20px;
    float: right;
    border: 1px solid black;
}

.Container {
    position: absolute;
    top: 10vh; bottom: 5vh; left: 5vw; right: 5vw;
}

<div class='Container'>
  <div class='Right'></div>
  <div class='Left'>
    <div class='BoardWrapper'>
      <div class='Board'></div>
    </div>
  </div>
</div>

我真的不想在这里处理 JS 解决方案，因为这些都是 React 组件。但是，包含 React 或 Semantic-UI 的解决方案会很好(尽管似乎应该有原始 CSS 解决方案)。

我不想编辑 .Left , .Right , 或 .Container , 但如果有帮助，我当然可以添加额外的元素。

Answer 1

移除填充底部

.BoardWrapper {
  padding-bottom: 50%;
}

并添加高度

.BoardWrapper {
  height: 100%;
}

工作示例: https://jsfiddle.net/zwp8vwob/