Какого стиля css добиться, чтобы Highchart вписывался во внешний контейнер и изменял размеры при изменении размера окна (т.е. они отзывчивы)

Question

Контекст : я пытаюсь создать 3 диаграммы на 1 строку (каждая имеет минимальную ширину), чтобы при изменении размера окна диаграммы также изменяли размеры и могли go к следующей строке в зависимости от общая ширина браузера.

Проблема : В настоящее время я что-то упускаю в css, потому что диаграмма переполняется в демонстрационном контейнере ниже. Всплывающая подсказка выглядит хорошо, но в контейнере видна только половина диаграммы, и обе оси также скрыты.

Кто-то реализовывал нечто подобное раньше? Я хочу понять, как загружать диаграммы в div.

PS В приведенном ниже коде highcharts-container - это встроенный div, который содержит диаграммы. Я использую последнюю версию Highcharts и Angular 7.

Мой текущий код html ->

<div class="container-fluid">
 <div class="row">
  <div class="col-lg-4 col-md4 demo>
   <div class="demo-container">
   <highcharts-chart [Highcharts]="Highcharts" [options]="options1" [callbackFunction]="cb1"> 
   </highcharts-chart>
   </div>
  </div>
<div class="col-lg-4 col-md4 demo>
   <div class="demo-container">
   <highcharts-chart [Highcharts]="Highcharts" [options]="options2" [callbackFunction]="cb2"> 
   </highcharts-chart>
   </div>
  </div>
<div class="col-lg-4 col-md4 demo>
   <div class="demo-container">
   <highcharts-chart [Highcharts]="Highcharts" [options]="options3" [callbackFunction]="cb3"> 
   </highcharts-chart>
   </div>
  </div>
 </div>
</div>

My css код (основная часть) ->

.container-fluid{
width:100%
}
.demo{
margin: 20px 0;
min-width: 448px;
}
.demo-container{
position: relative;
border: 1px solid transparent;
box-shadow: 0 0 20px #1793f5;
width: 100%;
height: 100%;
}
.highcharts-container{
height: 100% !important;
width: 100% !important;
display: inline-block;
vertical-align: middle;
}

Answer 1

Обновление

одна из самых сложных задач, с которыми я столкнулся, но добавьте это к стилю. css и ваше содержимое будет динамически c внутри его контейнера.

.highcharts-background, .highcharts-root, .highcharts-container {
  max-height: 100%;
  max-width: 100%;
}

---

это то, что вы ищете?

Это было сделано с использованием изображений графиков в размещенных вами ссылках. Я также использовал flexbox, которые, кажется, то, что вы ищете.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.container-fluid div {
  width: auto;
  border: 2px solid red;

  min-width: 33%;
}

.container-fluid{
display: flex;
flex-wrap: wrap;
border: 2px solid blue;

justify-content: center;
}

<div class="container-fluid">
  <div class="chartOne">
    <img src="https://i.gyazo.com/161954d0841b7a398d5f0d63e1b2bcc4.png" alt="">
  </div>

  <div class="chartOne">
    <img src="https://i.gyazo.com/161954d0841b7a398d5f0d63e1b2bcc4.png" alt="">
  </div>

  <div class="chartOne">
    <img src="https://i.gyazo.com/161954d0841b7a398d5f0d63e1b2bcc4.png" alt="">
  </div>

</div>

Answer 2

Вы можете попытаться включить следующее CSS как часть demo-container или container-fluid ... один из них должен выполнить сделку за вас.

height: 100% !important;
width: 100% !important;