子元素旋转90度，如何正常的撑开父元素（高宽对应）

解答思路

transform 是纯视觉层面的变换，不会改变元素在文档流中原本占据的布局空间，因此单纯用 CSS 旋转无法让父元素“感知”到子元素旋转后的视觉尺寸。回答给出的是一种基于「浏览器会在内容溢出时显示滚动条」这一特性的变通思路：让内容溢出容器从而出现滚动条，再通过 JS 动态调整容器高度来达到视觉上「撑开」的效果。

详细说明

需要理解的关键点是：transform: rotate() 只改变元素的渲染表现（视觉上看到的位置和形状），并不会影响该元素在正常布局流中所占据的几何尺寸——也就是说浏览器在计算父元素的宽高时，依然是按照子元素旋转前的宽高来计算的，这也是为什么单纯的 CSS 旋转无法让父元素「随之」调整宽高。

针对这个限制，回答提供的思路是一种取巧的处理方式：利用 body（或某个容器）在内容溢出时会显示滚动条这一浏览器行为特性，先让内容按照实际视觉尺寸溢出容器，浏览器会据此显示滚动条，随后通过 JS 定时读取/计算实际需要的高度，动态设置到容器的 height 上，从而模拟出「父元素根据旋转后内容自动撑开」的效果。

需要说明的是，这属于一种变通的 hack 方案，并不是标准的 CSS 能力，实际使用时也可以考虑更直接的替代思路，例如：提前手动计算并互换父元素的 width/height，或者用 JS 在旋转后读取子元素的 getBoundingClientRect() 实际渲染尺寸后再赋值给父元素，避免依赖滚动条这种间接特性。可参考回答中给出的在线 Demo（http://jsrun.net/vfwKp/edit）查看具体实现。

小结

CSS transform 旋转不会改变元素在布局流中的占位尺寸，因此父元素无法自动感知子元素旋转后的视觉尺寸；可以借助「溢出出现滚动条」的特性配合 JS 动态调整高度来实现变通，也可以直接用 JS 读取旋转后的实际渲染尺寸来更精确地控制父元素宽高。