SVG 超过弹性项目容器

Question

示例：https://play.tailwindcss.com/21iQsBe9p1?size=758x720

当您缩放视口时，您可以看到 SVG 超出了 flex-1 容器的边界，并将页脚推离屏幕。我这辈子都想不出解决办法。

注意：我正在使用 Tailwind CSS，但这不是 Tailwind 的问题。

Answer 1

我从不使用 Tailwind Css，但您可以设置 positon: absolute 并且 svg 元素的左、右、上、下设置为 0，如果其容器具有 [=14] =].

<!-- Dynamic height from flex-1 -->
<div class="flex-1 relative">
  <!-- SVG height not fitting to flexible item height -->
  <svg viewBox="0 0 100 100" class="max-h-full" style="position:absolute;left:0;right:0;bottom:0;right:0;">
    <circle cx="50" cy="50" r="45" fill="transparent" stroke-width="5"
      class="stroke-current text-blue-500" />
  </svg>

在 Tailwind CSS 中，您可以使用类 absolute 和 inset-0

<!-- Dynamic height from flex-1 -->
<div class="flex-1 relative">
  <!-- SVG height not fitting to flexible item height -->
  <svg viewBox="0 0 100 100" class="max-h-full absolute inset-0" >
    <circle cx="50" cy="50" r="45" fill="transparent" stroke-width="5"
      class="stroke-current text-blue-500" />
  </svg>

example

SVG 超过弹性项目容器

SVG exceeds flex item container

css

svg

tailwind-css