Responsive layout: Adjust SVG size to fill the remaining space of its parent
<p>There are quite a few questions on how to size or scale SVG elements within a page already, but none of them addressed sizing an SVG so it fills exactly the <em>remaining</em> available space within its parent - a <code>&lt;div&gt;</code> with <code>id="content"</code> which already contains some <code>p</code>aragraphs (or other elements).</p>

<p>Target platforms include desktop browsers <em>and</em> mobile apps (using <a href="https://cordova.apache.org/" rel="nofollow noreferrer">Cordova</a> in case that matters).</p>

<p>I am using <a href="http://d3js.org/" rel="nofollow noreferrer">D3.js</a> for drawing the SVG contents, so I don't want to use the SVG <code>viewBox</code> attribute (which is explained nicely in <a href="https://stackoverflow.com/a/19485375/897968">this answer</a>) because that would also scale stroke widths which I'd like to have under direct CSS/JavaScript control.</p>

<p>Here is what I have so far:
<a href="http://codepen.io/friendfx/pen/OMxYrL" rel="nofollow noreferrer">http://codepen.io/friendfx/pen/OMxYrL</a></p>

<p>This works quite well across modern desktop browsers but has the following problems:</p>

<ol>
<li>When reducing the window size such that the SVG element should become smaller than 300px in width or 150px in height (which I nowhere specified but which seems to be some sort of "default SVG size"), the layout starts to fall apart in Chrome and IE and (to a lesser extent Firefox which seems to have only problems with the 150px height).</li>
<li>IE doesn't want to wrap the first (long) paragraph as long as the <code>body</code>'s <code>flex-direction</code> is <code>row</code>.</li>
<li>On Android the height of the SVG element seems to always equal the WebView's height, irrespective of the vertical space taken up by the two <code>&lt;p&gt;</code> elements before the <code>&lt;svg&gt;</code>.</li>
</ol>

<p>While I could potentially ignore issues 1 and 2, the 3rd one is a killer as I don't want any scrolling whatsoever.</p>

<p>After reading the <a href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" rel="nofollow noreferrer">SVG Specification on intrinsic sizing</a>, 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 <a href="https://www.w3.org/TR/SVG/intro.html#TermViewport" rel="nofollow noreferrer">SVG viewport</a>'s size (which I believe to be the size of the WebView/browser window).</p>

<p>Is there a reasonably clean way to solve (at least) issue 3?</p>

<p>By the way, <a href="http://codepen.io/friendfx/pen/PZJrvm" rel="nofollow noreferrer">here is a fork</a> of the above code where I just replaced the <code>&lt;svg&gt;</code> element with a <code>&lt;p&gt;</code> and which works beautifully across all browsers <em>and</em> the Android WebView.</p>