html - 保持具有动态高度的 div 的纵横比

Question

我想通过纯 CSS 创建一个正方形 div，它的 height 是动态的，它的 width 将根据 height 进行缩放。

正如我们在下面的代码片段中看到的那样，container 高度是基于其内容的动态高度。红色的 square 占据了 container 的整个高度，宽度应该等于 height。
我知道我们可以maintain aspect ratio of a div base on its width但是当 height 是dynamic 时我找不到方法。

任何帮助，将不胜感激!非常感谢!

请注意:高度是动态的，因此 the solution with vh没有用，代码片段只是一个 Playground 。

#container {
  width: 400px;
  padding: 20px;
  border: solid 1px black;
  position: relative; 
}

.square {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0; 
  background-color: red;
  
  width: 100px /*Hmm its just a dummy value*/
}

<div id="container">
  <div class="content">
    I'm a dynamic content
  </div>
  <div class="square"></div>
</div>

Answer 1

这是另一种解决方案:

我们可以在主 .square div 中创建一个内部 div 继承其父级高度。

然后，如果我们旋转那个内部的 div，它的高度现在变成了它的宽度。所以此时我们要做的就是隐藏父 div 的溢出，并应用一些转换以使其在正确的位置结束。

#container {
  width: 400px;
  padding: 20px;
  border: solid 1px black;
  position: relative;
}

.square {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
}

.square>div {
  background-color: red;
  transform: rotate(-90deg) translate(100%, 0%);
  width: 100vw;
  height: 100%;
  transform-origin: 100% 100%;
}

<div id="container">
  <div class="content">
    <textarea> I'm a dynamic content</textarea>
  </div>
  <div class="square">
    <div></div>
  </div>
</div>