Javascript 使div占用所有剩余的可用空间

我使用SVG制作了一个图形，并将其放入一个样式化的div中。它看起来很棒。然后，我在div中添加了一个组件，突然间我伟大的标记和样式变得不那么伟大了。如果我取消注释span，svg将获得封闭div总高度的100%

<div class="graph">
  <!--<span>I'm damaging the layout!</span>-->
  <svg id="graph1" width="100%" height="100%" />
</div>

---

最好是通过样式和无JS干预。这是答案。

您试过flexbox吗？这有用吗我并没有完全理解你的描述。不过只是提出一个想法。否则绝对定位也会很快修正它，比如短文本@GCyrillus不确定是否解释得足够清楚。我希望我的div（蓝色的一个）包含其中的所有组件。然后，svg应该获得可用空间的最大宽度/高度。因此，如果我附加一个额外的span或div或其他任何东西，减少可用空间量，svg将收缩（仍然占用剩余的可用空间）。@Pangloss是的，你完全明白我的意思。对于静态加法，它可以完美地工作。如果单击div区域，请尝试查看发生了什么。看见我希望svg变得更小，根据可用区域调整大小。可能吗？如果不是的话，我想让潜水舱伸展。仍然可以完整显示svg。@KonradViltersten可以拉伸div，请参阅此更新的演示-我刚刚将高度更改为最小高度。

svg {
  margin: 0px;
  //border: solid;
}