响应式布局：调整 SVG 大小以填充其父项的剩余 space

Question

关于如何在页面中调整 SVG 元素的大小或缩放比例已经有很多问题，但其中 none 解决了调整 SVG 大小的问题，因此它恰好填充了 剩余的 在其父级中可用 space - <div> 和 id="content" 已经包含一些 p 段落（或其他元素）。

目标平台包括桌面浏览器和移动应用程序（在重要的情况下使用 Cordova）。

我正在使用 D3.js for drawing the SVG contents, so I don't want to use the SVG viewBox attribute (which is explained nicely in this answer)，因为这也会缩放我希望在直接 CSS/JavaScript 控制下的笔划宽度。

这是我目前的情况： http://codepen.io/friendfx/pen/OMxYrL

这在现代桌面浏览器中运行良好，但存在以下问题：

当减小 window 大小时，SVG 元素的宽度应小于 300px 或高度应小于 150px（我没有指定但似乎是某种 "default SVG size"），布局在 Chrome 和 IE 中开始崩溃（在较小程度上似乎只有 150px 高度有问题的 Firefox）。
只要 body 的 flex-direction 是 row.
在 Android 上，SVG 元素的高度似乎总是等于 WebView 的高度，与 [=19] 之前的两个 <p> 元素所占据的垂直 space 无关=].

虽然我可能会忽略问题 1 和问题 2，但第三个问题是一个杀手，因为我不想要任何滚动。

阅读 SVG Specification on intrinsic sizing, I am wondering whether the WebView's behaviour is actually closest to the spec since it makes the SVG (at least vertically) grow to the SVG viewport 的大小后（我认为这是 WebView/browser window 的大小）。

是否有解决（至少）问题 3 的合理干净的方法？

顺便说一句，上面代码的 here is a fork 我只是用 <p> 替换了 <svg> 元素，并且它在所有浏览器中都能很好地工作和 Android WebView.

Answer 1

通过反复试验并遵循使用 width: 100%，我将 SVG 元素的样式设置如下：

svg {
  border: 1px solid #0E0;
  flex-grow: 1;
  width: 100%;
  height: 100%;
}

这是 Codepen 上的完整示例： https://codepen.io/friendfx/pen/RrjpeL

SVG 元素仍然没有缩小到其神秘的最小尺寸限制 300px * 150px 以下，但我暂时可以接受。

响应式布局：调整 SVG 大小以填充其父项的剩余 space

Responsive layout: Adjust SVG size to fill the remaining space of its parent

css

svg

cross-browser

uiwebview

android-webview