如何让SVG在Flex布局中不超出父容器高度并保持宽高比

要实现SVG占满父容器高度同时维持viewBox定义的2:1宽高比、避免溢出，只需调整两处样式：

• 给SVG的父容器（红色背景的flex-1元素）添加h-full overflow-hidden：确保容器高度填满Flex布局的可用空间，同时隐藏超出容器的内容
• 给SVG元素添加h-full w-auto：让SVG高度占满父容器，宽度根据viewBox的比例自动计算，保持原有宽高比

修改后的完整代码：

<div class="relative container h-80 mx-auto bg-green-200 p-5 flex">
  <div class="absolute top-0 font-semibold">Container border</div>
  <div class="flex-1 bg-red-200 h-full overflow-hidden">
     <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" class="h-full w-auto">
            <rect x="0" y="0" width="200" height="100" />
          </svg>
  </div>
  <div class="bg-blue-200 font-bold">Right part</div>
</div>

原理说明 #

• h-full：让SVG父容器继承Flex容器的高度（即h-80减去内边距后的高度）
• overflow-hidden：防止SVG按比例计算后的宽度超出父容器时出现溢出
• h-full w-auto：强制SVG高度匹配父容器，宽度基于viewBox的200:100比例自动缩放，保证宽高比不变

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