Как сделать так, чтобы диаграмма Древовидной карты highchart заполнила всю страницу без переполнения

Серия древовидных карт HighChart прекрасно работает, когда нужно заполнить всю ширину страницы фиксированной высотой: когда вы изменяете размер страницы, древовидная карта соответственно изменяет размер по горизонтали.

С другой стороны, если вы попытаетесь сделать высоту в процентах, изменение размера полностью сломается. Мне не удалось создать древовидную диаграмму, которая заполнила бы всю страницу по горизонтали и вертикали. Я действительно думаю, что я что-то упускаю!

Я сделал скрипку, чтобы показать проблему: https://jsfiddle.net/gqeLfxy3/

Установка тела и высоты и ширины контейнера диаграммы на 100% не помогла.

body {
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}
.highcharts-figure {
    width: 100%;
    height: 100%;
    margin: 0;
}

Если высота диаграммы установлена ​​в процентах, она изменяет размер «плохо»:

Highcharts.chart('container', {
        chart: {
        height: '100%', // set it to a fixed size and the chart will behave well but won't fill the entire height
      margin:0
    },

Диаграмма должна заполнять страницу, а не выходить за ее пределы. Я не нашел способа сделать это, установив фиксированную высоту диаграммы и, возможно, прослушивая события изменения размера.

Кто-нибудь знает способ сделать это?