Html Google Chrome中仅可扩展到父容器的内联SVG

编辑：应用<代码>最小高度：0to

.svg container

修复了容器大小，但在Edge中，svg元素溢出了它们的容器

---

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

当我在Google Chrome中查看时，通过将elements

max height

属性设置为

100%

，我已经能够按预期工作。但是，在其他浏览器中查看时，SVG似乎忽略了这一规则

以下是我尝试过的浏览器：

• Google Chrome:Version80.0.3987.87（官方版本）（64位）这一款有效
• Microsoft Edge:44.18362.449.0
• Firefox开发者版：73.0b12（64位）
• Firefox:72.0.2（64位）

以下是Google Chrome中的外观（预期结果）：

以下是在FFDE中（也在常规FF&Edge中）的外观：

body

和

html

元素都有

height:100vh的规则

和所有其他子尺寸均源自

%

或

fr

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

下面是一个示例，我将包括代码。谢谢你抽出时间

*{
保证金：0；
填充：0；
框大小：边框框；
}
html，
身体{
宽度：100vw；
高度：100vh；
字体系列：Arial、Helvetica、无衬线字体；
显示器：flex；
证明内容：中心；
}
.集装箱{
显示：网格；
网格模板行：1fr 2fr 3fr；
宽度：100%；
最大高度：100%；
最大宽度：540像素；
}
.svg容器{
边框：1px纯黑；
}
svg{
宽度：100%；
身高：100%；
最大高度：100%；
}

文件

如果您确定svg容器的数量，那么以下内容适用于Firefox和Chrome

*{
保证金：0；
填充：0；
框大小：边框框；
}
html，
身体{
宽度：100vw；
高度：100vh；
字体系列：Arial、Helvetica、无衬线字体；
}
.集装箱{
宽度：100%；
身高：100%；
}
.svg容器：第n个子容器（1）{
高度：计算（100%/6）；
边框：1px纯黑；
}
.svg容器：第n个子容器（2）{
高度：计算（100%/3）；
边框：1px纯黑；
}
.svg容器：第n个子容器（3）{
高度：计算（100%/2）；
边框：1px纯黑；
}
svg{
宽度：100%；
身高：100%；
最大高度：100%；
}

文件

添加

最小高度：0

要解决大多数浏览器（相关：）中的问题，对于Edge，您需要添加

高度：0；最小高度：SVG的100%

。最后一个修复程序将删除“高度百分比”的用法，这会造成边缘问题

*{
保证金：0；
填充：0；
框大小：边框框；
}
html，
身体{
宽度：100vw；
高度：100vh；
字体系列：Arial、Helvetica、无衬线字体；
显示器：flex；
证明内容：中心；
}
.集装箱{
显示：网格；
网格模板行：1fr 2fr 3fr；
宽度：100%；
最大高度：100%；
最大宽度：540像素；
}
.svg容器{
边框：1px纯黑；
最小高度：0；
}
svg{
宽度：100%；
身高：0；
最小高度：100%；
}

文件

我不确定这是否正是您想要达到的效果，但我已经着手削减标记和样式，看看我是否可以通过单亲

容器和3个

子容器实现您想要的效果

工作示例：

.svg容器{
显示器：flex；
弯曲方向：立柱；
宽度：60vw；
高度：100vh；
边框：1px实心rgb（0,0,0）；
}
svg{
宽度：100%；
边框：1px实心rgb（0,0,0）；
}
svg:n类型（1）{
高度：计算（100%/6*1）；
}
svg:n类型（2）{
高度：计算（100%/6*2）；
}
svg:n类型（3）{
高度：计算（100%/6*3）；
}

本例中的SVG现在可以有效地扩展到具有固定高度的父级。当父容器高度设置为%时，我的问题是缩放，那么您想要什么高度@在原始示例中，第一个孩子是1/6秒2/6，第三个孩子是100vh的3/6。您的计算将使每1/3的100vh。Calc有效地计算固定大小。如果没有固定的大小，SVG就无法响应父容器吗？@Senipah更新了我的答案。非常感谢，但我希望能够使用网格或flex解决这个问题，而不是本质上计算比率，因为这最终会被一些未知数量的组件使用。您需要

min height:0到SVG容器。这是：@TemaniAfif的副本，如果这解决了FF上的问题，而不是边缘上的问题。