How to make C3.js charts height Dynamically?

I'm using C3.js and when I have a lot of data, the chart doesn't render quite well and it's because of its height. C3 somehow is setting a fixed height and it's only showing the bottom labels. I tried using the legend: {show: false} property but it doesn't solve my issue correctly.

This is what it looks like:

The code from where I put the chart :

<div id="chart_product" class="section-to-print"> </div>

And the CSS:

.section-to-print, .section-to-print * {
   visibility: visible;
}

.section-to-print {
   position: absolute;
   left: 0;
   top: 0;
}

Finally, when I inspect the DOM it sets the div like this:

I would really appreciate all your help. Thank you!