SVG超过弹性项目容器[关闭]答案

【问题标题】：SVG exceeds flex item container [closed]SVG超过弹性项目容器[关闭]
【发布时间】：2021-03-27 04:05:09
【问题描述】：

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

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

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

【问题讨论】：

注意：如果您的问题与 Tailwind 无关，请勿使用 tailwind-css。您可能希望在您的问题中包含一些代码和/或图像，以使其清楚（呃）并增加获得帮助的机会。
你是在用这个角色强迫它：.h-screen { height: 100vh;}
寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。尽管您提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website/example doesn't work can I just paste a link。

标签： css svg tailwind-css

【解决方案1】：

我从不使用 Tailwind Css，但你可以设置 positon: absolute 并且如果 svg 元素的容器具有 position:relative，则左、右、上、下设置等于 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" 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 max-h-full 才能使其正常工作，谢谢！！