html - 旋转文本后如何自动调整容器/父级的宽度？

Question

当我将 div / 容器内的文本元素旋转 90 度时，尽管文本被旋转，但父容器的宽度与文本的长度相同。

例如：假设文本是 200 x 10。旋转后，它变成 10 x 200。但容器保持 200 x 10 而不是 10 x 200。

如何自动化容器的宽度，使其成为旋转文本时未旋转文本的高度？

<div class="container">
  <span class="to_rotate"> Hello, rotate me! </span>
</div>

.to_rotate {
   transform: rotate(-90deg);
}