一、旋转变换的核心原理 #

• transform: rotate() 是视觉渲染层面的变换，不会改变元素本身的布局盒模型（即元素在文档流中占据的宽高空间）。
• 比如你的SVG原尺寸（基于viewBox）是宽1000、高200，旋转-90°后，视觉上变成高1000、宽200，但元素在布局中仍然占据原宽1000、高200的空间，这就导致超出父容器宽度，出现水平滚动条。
• transform-origin: center 仅控制旋转的中心点，不会改变元素的布局占位大小。

二、解决步骤（结合Tailwind实现） #

要实现旋转后SVG占满父容器高度且无滚动条，需要让元素的布局占位尺寸匹配旋转后的视觉尺寸，再配合变换修正位置：

1. 用容器控制布局占位
   给SVG套一个容器，设置容器高度为父容器高度（h-full），宽高比设为原SVG的高:宽（即200:1000 = 1:5，对应Tailwind的aspect-[1/5]），让容器的布局尺寸刚好匹配旋转后的SVG视觉尺寸。

2. SVG旋转与位置修正
   SVG设置h-full占满容器，添加-rotate-90旋转，再通过translate-x-[-50%] translate-y-[50%]修正旋转后的偏移（旋转中心为元素中心时，旋转后元素会向容器外偏移，需要平移拉回）。

修改后的完整代码：

<div class="bg-[#303f4f] min-h-svh grid grid-cols-2">
  <div class="border"></div>
  <div class="border flex flex-row">
    <!-- 控制布局占位的容器 -->
    <div class="h-full aspect-[1/5]">
      <svg viewBox="0 0 1000 200" xmlns="http://www.w3.org/2000/svg" class="h-full transform -rotate-90 origin-center translate-x-[-50%] translate-y-[50%]">
        <path d="M0,0 H1000 V200 H0 Z" fill="blue"/>
      </svg>
    </div>
    <div class="bg-[#c61a27] grow"></div>
  </div>
</div>

三、简化方案（无需额外容器） #

直接给SVG设置高度占满父容器，同时用aspect-[1/5]强制宽高比匹配旋转后的需求，再配合变换：

<div class="bg-[#303f4f] min-h-svh grid grid-cols-2">
  <div class="border"></div>
  <div class="border flex flex-row">
    <svg viewBox="0 0 1000 200" xmlns="http://www.w3.org/2000/svg" class="h-full aspect-[1/5] transform -rotate-90 origin-center translate-x-[-50%] translate-y-[50%]">
      <path d="M0,0 H1000 V200 H0 Z" fill="blue"/>
    </svg>
    <div class="bg-[#c61a27] grow"></div>
  </div>
</div>

这样就能实现SVG旋转-90°后占满父容器高度，且不会出现水平滚动条的效果，和你期望的结果一致。

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