我正在尝试创建一个小型仪表板应用程序 . 由于它将在仪表板上，我想避免不惜一切代价滚动 . 因此，我将html / body标签的高度/宽度设置为100％，并在其他地方使用百分比，因为我不知道屏幕尺寸 .
然而，当我添加内联SVG时，当我在SVG元素上将宽度设置为100％时，它会强制父DIV变大以适应SVG，而不是在它变为较小尺寸时停止 .
这很难解释，但我做了一个JS小提琴：
https://jsfiddle.net/5khkzgk8/4/
这是应用程序的基础布局 . SVG是一个填充svg的黑色矩形 .
svg {
width: 10%;
height: 100%;
}
目前svg宽度为10％，并且工作正常 . 如果你将10％的百分比提高10％并看看它的行为方式，你会看到 . 我想要的（并且会发生这种情况）是，一旦它填满了div的高度（浅蓝色），SVG就会停止放大 . 发生的事情是它继续扩大直到我们达到宽度= 100％，但现在div太大了你需要滚动 .
我非常感谢任何帮助 . 我只是一个在前端/ css的周末烦人，所以我现在真的迷失了 .
谢谢！