title: Fit a plot in a div's max height
body: <p>I am trying a plot in a <code>div</code> using <code>plotly.js</code> which is a bit large in height. I want to fit it to div's height. If I use </p>
  
  <pre><code>&lt;div id="plotDiv"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and </p>
  
  <pre><code>var trace1 = {
              x: ['giraffes', 'orangutans', 'monkeys'],
              y: [20, 14, 23],
              name: 'SF Zoo',
              type: 'bar'
          };
  
          var trace2 = {
              x: ['giraffes', 'orangutans', 'monkeys'],
              y: [12, 18, 29],
              name: 'LA Zoo',
              type: 'bar'
          };
  
          var data = [trace1, trace2];
  
          var layout = {
              autosize:true,
              barmode: 'stack',
              xaxis: {
                  tickangle: -45
              },
          };
  
          Plotly.newPlot('plotDiv', data, layout);
  </code></pre>
  
  <p>The plot is a bit large in height, so i put a <code>max-height</code> in <code>div</code>, this way :</p>
  
  <p><code>&lt;div id="plotDiv" style="max-height:300px"&gt;&lt;/div&gt;</code></p>
  
  <p>But this doesn't fit the plot in the div, and hides some of the plot. How to fit the complete plot in the div?</p>