如何使父元素根据旋转后子元素的边界框进行布局？

这个坑我踩过好多次！用transform: rotate处理表头垂直显示时，父元素总是按子元素原来的宽高布局，导致旋转后的内容溢出重叠，本质原因是CSS变换（transform）只改变视觉呈现，不会修改元素的布局盒模型——父元素根本“看不见”子元素旋转后的尺寸。

下面给你两个实用的解决方案，优先推荐纯CSS的方案，省心又稳定：

方案1：用writing-mode替代旋转（强烈推荐） #

如果你的需求只是让表头文本垂直排列，writing-mode是比rotate更合适的选择。它是真正改变文本的排版流向，元素的布局盒会自动适配文本方向，父元素也会自然跟着调整尺寸，完全不需要手动计算。

适配你场景的代码示例：

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

#a { 
  background-color: blue;
  /* 让父元素自动收缩到子元素的实际尺寸 */
  display: inline-block;
}
#b { 
  background-color: red;
  /* 设置垂直排版方向（从右往左，适合表头的阅读习惯） */
  writing-mode: vertical-rl;
  /* 让文本保持正立，避免倒转 */
  text-orientation: upright;
  /* 可选：添加内边距优化文本显示 */
  padding: 10px 5px;
}

不管#b里的内容怎么变，父元素#a都会自动适配它的垂直尺寸，完全不会出现溢出重叠的问题。

方案2：必须用rotate？用JS动态同步尺寸 #

如果因为特殊需求一定要用transform: rotate，那只能通过JavaScript手动计算旋转后的尺寸，同步给父元素。核心思路是获取子元素旋转后的实际边界框，把宽高互换后设置给父元素。

示例代码：

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

#a { 
  background-color: blue;
  display: inline-block;
}
#b { 
  background-color: red;
  transform: rotate(-90deg);
  /* 把旋转原点设为左上角，避免元素偏移 */
  transform-origin: top left;
  display: inline-block;
}

const parentEl = document.getElementById('a');
const childEl = document.getElementById('b');

function syncParentSize() {
  // 获取子元素旋转后的实际边界框
  const rotatedRect = childEl.getBoundingClientRect();
  // 旋转90度后，宽高互换，赋值给父元素
  parentEl.style.width = `${rotatedRect.height}px`;
  parentEl.style.height = `${rotatedRect.width}px`;
}

// 页面加载时执行一次
syncParentSize();
// 如果内容或窗口尺寸动态变化，记得重新执行
window.addEventListener('resize', syncParentSize);
// 比如内容更新后也调用 syncParentSize()

总结一下：优先用方案1，纯CSS实现，适配动态内容，维护成本低；方案2作为 fallback，适合必须使用rotate的特殊场景。

内容的提问来源于stack exchange，提问作者Herbert