title: Dagre layout fit:true doesn't work in cytoscape.js
body: <p>I'd like to visualize two graphs in adjacent div blocks 300x200 using Dagre layout.</p>
  
  <p>Here is the html code:</p>
  
  <pre><code>&lt;div class="row"&gt;
        &lt;div class="col-md-5" id="graph1"&gt;
          &lt;p style="text-align: center"&gt;Graph1&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="col-md-5" id="graph2"&gt;
          &lt;p style="text-align: center"&gt;Graph2&lt;/p&gt;
        &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I create two cytoscape graphs one by one as specified here:</p>
  
  <pre><code>var cy2 = cytoscape({
      container: document.getElementById('graph1'),
  
      boxSelectionEnabled: false,
      autounselectify: true,
      userPanningEnabled: false,
  
      layout: {
        name: 'dagre',
        fit: true
      },
  
      style: [
        {
          selector: 'node',
          style: {
            'content': 'data(id)',
            'text-opacity': 0.5,
            'text-valign': 'center',
            'text-halign': 'right',
            'background-color': '#11479e'
          }
        },
  
        {
          selector: 'edge',
          style: {
            'width': 2,
            'target-arrow-shape': 'triangle',
            'line-color': '#9dbaea',
            'target-arrow-color': '#9dbaea'
          }
        },
  
        {
          selector: '#n1',
          style: {
            'background-color':'#ffffff',
            'shape':'rectangle',
            'background-opacity': 1.0
          }
        },
  
        {
          selector: '#n0',
          style: {
            'background-color': '#ffffff',
            'shape': 'rectangle',
            'background-opacity': 1.0
          }
        }
      ],
  
      elements: {
        nodes: [
          { data: { id: 'n0' } },
          { data: { id: 'n1' } },
          { data: { id: 'n2' } },
          { data: { id: 'n3' } },
          { data: { id: 'n4' } }
        ],
        edges: [
          { data: { source: 'n0', target: 'n1' } },
          { data: { source: 'n1', target: 'n2' } },
          { data: { source: 'n1', target: 'n3' } },
          { data: { source: 'n0', target: 'n4' } }
        ]
      }
    });
  
    var cy3 = cytoscape({
      container: document.getElementById('graph2'),
  
      boxSelectionEnabled: false,
  
      layout: {
        name: 'dagre',
        fit: true
      },
  
      style: [
        {
          selector: 'node',
          style: {
            'content': 'data(id)',
            'text-opacity': 0.5,
            'text-valign': 'center',
            'text-halign': 'right',
            'background-color': '#11479e'
          }
        },
  
        {
          selector: 'edge',
          style: {
            'width': 2,
            'target-arrow-shape': 'triangle',
            'line-color': '#9dbaea',
            'target-arrow-color': '#9dbaea'
          }
        },
        {
          selector: '#n1',
          style: {
            'background-color':'#ffffff',
            'shape':'rectangle',
            'background-opacity': 1.0
          }
        }
      ],
  
      elements: {
        nodes: [
          { data: { id: 'n1' } },
          { data: { id: 'n2' } },
          { data: { id: 'n3' } },
          { data: { id: 'n4' } },
          { data: { id: 'n5' } },
          { data: { id: 'n6' } }
        ],
        edges: [
          { data: { source: 'n1', target: 'n2' } },
          { data: { source: 'n1', target: 'n3' } },
          { data: { source: 'n1', target: 'n4' } },
          { data: { source: 'n1', target: 'n5' } },
          { data: { source: 'n1', target: 'n6' } }
        ]
      }
    });
  </code></pre>
  
  <p>The right chart ('graph2') is always rendered partly even though <code>fit:true</code> is specified in the layout options. 
  Any ideas how to make it work?</p>