title: Using Bulma CSS, implement scrollbar-free page that fills the viewport with a central inline SVG that scales to fill the space
body: <p>This question is about using <strong>Bulma</strong> css.</p>
  <p>I'm looking for a way to size my content so that there are no scrollbars.
  At the moment there is just a navbar and an inline SVG.
  The goal is for the SVG to be scaled so that it maintains its aspect ratio, and expands so that its largest dimension matches the available width and remaining height of the viewport.</p>
  <p>The pure CSS version is basically <a href="https://stackoverflow.com/a/54310723/5593703">this answer</a> (and many others like it), but I want to stick with Bulma css classes (v 0.9.1).
  It feels like it should be easy, but I'm not getting the result that I want.</p>
  <p>I found that putting <code>height=&quot;92vh&quot;</code> on the svg element was almost ok, but I don't want to have to continue tuning the height as I add elements to the document.</p>
  <p>My document looks like this</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
    &lt;title&gt;My Tool&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body height=&quot;100vh&quot; class=&quot;is-flex is-flex-direction-column&quot;&gt;
    &lt;nav class=&quot;navbar&quot; role=&quot;navigation&quot; aria-label=&quot;main navigation&quot;&gt;
      &lt;!-- navbar details elided --&gt;
    &lt;/nav&gt;
    &lt;div class=&quot;container is-fluid is-flex-grow-1 is-flex-shrink-1&quot; id=&quot;scene_parent&quot;&gt;
      &lt;!-- inline svg element is added here programmatically --&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>The SVG element looks like:</p>
  <pre><code>  const svg = `
      &lt;svg id=&quot;picture&quot; height=&quot;100%&quot; viewBox=&quot;${vb['min-x']} ${vb['min-y']} ${vb.width} ${vb.height}&quot; preserveAspectRatio=&quot;xMidYMid meet&quot;&gt;
        &lt;g transform=&quot;translate(0 ${middle}) scale(1 -1) translate(0 ${-middle})&quot;&gt;
          ${polyOne}
          ${polyTwo}
        &lt;/g&gt;
      &lt;/svg&gt;`;
  </code></pre>
  <p>where <code>vb</code> is a calculated viewBox, <code>middle</code> is the horizontal middle of the viewbox, and polyOne and polyTwo are strings representing polygons.</p>
  <p>What I thought I could achieve was to have the parent div (#scene_parent) resize itself and then get the svg to choose its height from the parent div.</p>
  <p>It doesn't work.  The svg is invariably rendered too high, thus scrolling down the page.
  I would be grateful if you could show me my mistake.</p>