旋转元素的父元素布局W.R.T.边界框

不过,我想将表头中的文本旋转90度(我认为这是一个合理的用例) transform: rotate(-90.0deg); 在布局郊游方面表现不好。也就是说,父元素将其高度调整为子元素的高度,旋转后的高度即为宽度。这很烦人,因为这会使子元素明显溢出父元素,导致文本与其他文本重叠。

示例( https://jsfiddle.net/jpe3voxy/ )

<div id="z">
  A very long header
</div>
<div id="a">
  <div id="b">
    Hello World
  </div>
</div>

#a {
  background-color: blue
}

#b {
  background-color: red;
  transform: rotate(-90.0deg);
  overflow: hidden;
  height: 50px; width: 200px;
}

元素 #b 重叠标题。我们可以通过在 白细胞介素B 在 #a 。换句话说,手动布局,这是混乱的,一般不会工作的动态内容 .

问题 如何使父元素布局w.r.t.成为子元素的边界框,而不是子元素的未转换大小?