Html 内嵌SVG随Flexbox一起消失

我正在尝试使用Flexbox将内联SVG元素垂直和水平居中。出于某种原因，当我在父容器上显示：flex时，内联SVG就消失了

正文{
背景色：#000；
保证金：0；
边界：0；
大纲：0；
}
.flexbox容器{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

我们不会沉默
问题在于您没有告诉子元素
元素成长。

您可以使用
flex-grow:1
或速记
flex:1 0 auto
（其中第一个值是
flex-grow
，第二个值是
flex-shorn
，第三个值是
flex-basis
）

我在
.flexbox container>div
上添加了
flex-grow
，如下示例：


正文{
背景色：#000；
保证金：0；
边界：0；
大纲：0；
}
.flexbox容器{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.flexbox容器>div{
柔性生长：1；
}

我们不会沉默
您的SVG没有设置内部宽度/高度

您可以在SVG中执行此操作，
感谢您的回答，非常感谢您的回答，我非常感谢。我发现在某些浏览器中，如FF，无法处理SVG宽度设置为100%的问题。你遇到过这个问题吗？@JoelHoelting似乎是一个长期的问题。。。我更新了我的答案，并添加了一个讨论该问题的链接
.flexbox-container svg {
  width: 100%;
}