I'm not sure if this is a bootstrap or highcharts issue but I cannot seem to get my chart to size correctly; the initial chart width is too wide when both a scrollbar is present and in a bootstrap span. Resizing the window never seems to produce widths that are too wide but sometimes they are too narrow.

Removing the code from the span construct seems to result in proper width in all situations so I am thinking that there may be some detrimental interaction between hc and bootstrap.

I made a fiddle to demonstrate, but keep in mind that your browser window will need to be short enough to cause a scrollbar:

<http://jsfiddle.net/xEtherealx/Q5EGX/15/>

Is there a way I can force the width to conform via css? I can create a callback on window resize as a workaround but I would rather find a *proper* solution instead.

**Edit**: As suggested the following is a workaround, and could be called after some timeout or just once after page load:

```
    this.setChartSize = function() {
        chart.setSize( $(chart.container).parent().width(), $(chart.container).parent().height() );
        return false;
    };

```

HTML:

```
<div id="content" class="container-fluid">
    <div class="row-fluid">
        <div id="toresize" class="span3" style="background: gray; overflow: auto;">
            <div class="targetpane">
                 <h4 class="text-center">HC Sizing Test</h4>

                <!-- take up space -->
                <div class="well well-small" style="height: 160px;"></div>

                <!-- Chart -->
                <div class="well well-small" style="padding: 5px;">
                    <div id="barchart" style="height: 160px; margin-bottom: 5px;"></div>
                </div>

                <!-- take up space -->
                <div class="well well-small" style="height: 160px;"></div>
            </div>
        </div>

        <!-- span -->
        <div class="span9" style="background: gray;">
            <div class="myBorder">Some content</div>
        </div>
    </div>
</div>
<script src="http://code.highcharts.com/highcharts.js"></script>

```

CSS:

```
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.well
{
    background-color: #444;
}

.targetpane
{
    color: #888;
    background-color: #1B1B1B;
    border: 1px solid #888;
    border-radius: 3px;
    padding: 0px 5px 0px 5px;
}

.bodycontainer {
    height: 50px !important;
    white-space: nowrap;
    overflow-x: hidden;
}

```

JS:

```
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'barchart',
        borderWidth: 1
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});

$(window).resize(function () {
    $('#toresize').height($(window).height() - 3);
    console.log($(window).height());
})
$(window).resize();

```