小编Sen*_*pah的帖子

编辑：适用min-height: 0;于.svg-container修复容器大小，但在 Edge 中，svg 元素会溢出其容器。

我正在尝试将内联 SVG 元素缩放到其父容器的高度。父容器的大小使用 CSS 网格（我也尝试过 flex box）。

通过将元素max-height属性设置为100%. 然而，当在其他浏览器中查看时，SVG 似乎忽略了这个规则。

这些是我尝试过的浏览器：

• 谷歌浏览器：版本 80.0.3987.87（官方版本）（64 位）——这个有效
• Microsoft Edge：44.18362.449.0
• Firefox 开发者版：73.0b12（64 位）
• 火狐：72.0.2（64 位）

这是它在 Google Chrome 中的样子（预期结果）：

这是在 FFDE 中的样子（也在常规 FF 和 Edge 中）：

在body和html元素都具有一个规则height: 100vh;和其他所有孩子大小源自%或fr。

我非常感谢有关如何确保在容器使用 css grid 或 flex 时元素不超过其父容器的 100% 的任何指导，因为到目前为止我在其他线程中找到的解决方案都没有对我有用。

这是一个jsfiddle，下面我将包含代码。感谢您的时间。

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    html,
    body …