Why Google Charts always overflows?

Question

I'm digging google for an hour now, to find out why google chart api makes it's parent dom to overflow.

Scrollbars appear every time I draw the chart

As you can see there is no padding or margin. When I use default settings for chart.draw() I got the same result.

How can I make the chart to just fit in it's container? (overflow: hidden is not a good solution here, because the chart itself also overflows and I don't want to cut it off)

Thank you in advance for any help!

Update: JsFiddle

Answer 1

In your case the problem is basically that you specify a height to #chart, and set it to overflow-y: auto. This will cause the vertical scollbar to appear, and since you set the width: 100%, and the vertical scrollbar takes space, a horizontal scrollbar appears. Remove the overflow-y: auto declaration and you're good to go. I suggest you remove the height: 350px as well