I have a problem that I use the same method to insert plotly.py's image into html.

The first image by class="tab-pane fade show active" has perfectly fill the whole block. The .active {display:block} is the .css of that.

However, the second image by class="tab-pane fade" the size is shrinking to not fill all the block. The .tab-pane {display:none}.

I want to make the image from plotly.py to both tab-content no matter how the image size should be the same. Do it from .html and .css but I still cannot find the solution.

<div class="tab-content">
  <div id = 'week' class="tab-pane fade show active" role="tabpanel" aria-labelledby="contact-tab">
  <div id='chart0'></div>
  <script type='text/javascript'>
  var graphs = {{plot0 | safe}};
  Plotly.plot('chart0',graphs,{});</script>
  </div>
  <div id = 'month' class="tab-pane fade" role="tabpanel" aria-labelledby="contact-tab">
  <div id='chart1'></div>
  <script type='text/javascript'>
  var graphs = {{plot1 | safe}};
  Plotly.plot('chart1',graphs,{});
  </script>
  </div>
</div>