html - bootstrap 3 row height is always 400px

Question

I am trying to get a Highcharts pie chart to display correctly.

<div id="chart">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
        <div id="row-electric" class="row row-chart">
            <div id="divPieSubst" class="col-xs-6 col-sm-6 col-md-6 col-lg-6"></div>
            <div id="divPieFeedr" class="col-xs-6 col-sm-6 col-md-6 col-lg-6"></div>
        </div>
        <div class="row row-chart">
            <div id="divPieCycle" class="col-xs-6 col-sm-6 col-md-6 col-lg-6"></div>
            <div id="divPieRoute" class="col-xs-6 col-sm-6 col-md-6 col-lg-6"></div>
        </div>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
        <div id="divBarDays"></div>
    </div>
</div>

row-chart is something I tried to do with some CSS I found:

<style>
    div.row-chart {
        height: auto;
    }
</style>

Currently, I am struggling with the CCS, which I think is caused by bootstrap v3.3.7.

Why is it always coming back as a tall rectangle?

I included the Highcharts tag, because this could be something that Highcharts is doing.

question from:https://stackoverflow.com/questions/66053162/bootstrap-3-row-height-is-always-400px

Answer 1

In Highcharts API we can read:

height: null, number, string

...

By default (when null) the height is calculated from the offset height of the containing element, or 400 pixels if the containing element's height is 0. Defaults to null.

So yes - the height is set by the chart.

---

API Reference: https://api.highcharts.com/highcharts/chart.height