SVG 无法正确调整 Firefox 和 Edge 中 Flexbox 中容器的大小

Question

我试图在一个弹性项目中调整具有特定宽高比的 svg viewBox 的大小，该项目占据了其父项的“剩余部分”。

目的是让 SVG 始终具有正确的宽高比，并在页面大小发生变化时沿侧面留有空间以保持比例不变。这在 Chrome 中工作得很好，但在 Firefox 和 Edge 中，svg 似乎会调整大小以适应其容器的最大宽度，并通过调整其高度和容器的高度来保持纵横比。我需要它根据容器大小调整自身大小，并且永远不会“溢出”容器。

有谁知道我可以做些什么来使它在所有三种浏览器中工作？这是代码：

.parent {
  background: green;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.header-child {
  height: 200px;
  width: 100%;
  flex-shrink: 0;
  background: black;
}

.svg-child {
  display: inline-block;
  flex: 1;
  width: 100%;
}

<div class="parent">
  <div class="header-child"></div>
  <div class="svg-child">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 200" preserveAspectRatio="xMidYMin meet" height="100%" width="100%">
        				<rect width="100%" height="100%" fill="red" />
        				<rect x="0" y="0" width="10" height="10" fill="blue" />
        				<rect x="90" y="190" width="10" height="10" fill="yellow" />
        			</svg>
  </div>
</div>

我希望它们的尺寸都像镀铬（中心图像）：

这是一个更大系统中问题的最小再现。在实际产品中，父 div 托管在另一个本身就是弹性项目的 div 内。将上述代码粘贴到文本文档中并在所有 3 个浏览器中打开它将重现我遇到的实际问题。

问题的核心在于，当 Firefox 浏览器调整大小时，容器 div 的大小会调整为适合 svg，而不是调整 svg 大小（使用正确的视图框宽高比）来适合容器 div。

我并不真正关心它是否能在 Edge 中运行，但 Firefox 是必须的。

Answer 1

有两种方法可以解决您的问题。

第一种方法，使用html, body { height: 100% }并适用min-height: 0于.parent和.svg-child：

html, body {
  height:100%;
  margin: 0;
  padding: 0;
}

.parent {
  background: green;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  min-height: 0;
}

.header-child {
  height: 20px;
  width: 100%;
  flex-shrink: 0;
  background: black;
}

.svg-child {
  display: inline-block;
  flex: 1;
  width: 100%;
  min-height: 0;
}

<div class="parent">
  <div class="header-child"></div>
  <div class="svg-child">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 200" preserveAspectRatio="xMidYMin meet" height="100%" width="100%">
      <rect width="100%" height="100%" fill="red" />
      <rect x="0" y="0" width="10" height="10" fill="blue" />
      <rect x="90" y="190" width="10" height="10" fill="yellow" />
    </svg>
  </div>
</div>

第二种方式，使用vhheight parent( .parent { height: 100vh; }) 并设置.svg-child { min-height: 0; }：

html, body {
  margin: 0;
  padding: 0;
}

.parent {
  background: green;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100vh;
}

.header-child {
  height: 20px;
  width: 100%;
  flex-shrink: 0;
  background: black;
}

.svg-child {
  display: inline-block;
  flex: 1;
  width: 100%;
  min-height: 0;
}

<div class="parent">
  <div class="header-child"></div>
  <div class="svg-child">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 200" preserveAspectRatio="xMidYMin meet" height="100%" width="100%">
      <rect width="100%" height="100%" fill="red"/>
      <rect x="0" y="0" width="10" height="10" fill="blue"/>
      <rect x="90" y="190" width="10" height="10" fill="yellow"/>
    </svg>
  </div>
</div>

在Chrome、Firefox和Edge上运行的实时页面演示：https://zikro.gr/dbg/so/59679937/