Chart is Cropped in Firefox

I’m using Chromium 44.0.24 and Firefox 40.0.3 in Linux Mint 17.2.

On Chromium, chart is displayed correctly like this :

But in Firefox, label and bottom of the chart is cropped :

My HTML is like this :

<div class="content">
    <div class="box">
        <div class="box-header">
            <p class="header">Daily Sales</p>
        </div>
        <div id="ct-chart" class="chart"></div>
        <div class="box-footer box-legend">
            <p><i id="legend-income" class="fa fa-square"></i> Income</p>
            <p><i id="legend-capital" class="fa fa-square"></i> Capital</p>
            <p><i id="legend-profit" class="fa fa-square"></i> Profit</p>
        </div>
    </div>
</div>

Javascript :

var labels = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'];
var income = [25742, 24176, 15258, 14044, 14762, 17520, 12539, 22712, 20319, 12063, 14068, 8246, 20541, 12735, 18280, 17423, 12071, 10496, 6912, 9391, 12283, 13820, 22869, 7937, 14173, 9738, 10082, 14873, 12841, 6768];
var capital = [16254.715, 15412.763, 9741.414, 8824.078, 9276.232, 11042.787, 8119.397, 14116.888, 12862.216, 7572.455, 9141.24, 5367.299, 12826.632, 8099.858, 11561.422, 11191.344, 7692.961, 6644.227, 4389.582, 6015.917, 7923.305, 8856.643, 14588.642, 5051.441, 9071.414, 6344.426, 6471.769, 9363.205, 8143.329, 4093.242];
var profit = [9486.785, 8762.737, 5516.586, 5219.422, 5485.268, 6476.713, 4419.603, 8594.612, 7456.284, 4490.045, 4926.76, 2878.201, 7713.868, 4634.642, 6718.078, 6231.656, 4378.039, 3851.273, 2522.418, 3374.583, 4359.195, 4963.357, 8279.858, 2885.059, 5101.586, 3393.574, 3609.731, 5509.795, 4697.671, 2674.758];

var series = [{
    className: 'ct-income',
    name: 'income',
    data: income
}, {
    className: 'ct-capital',
    name: 'capital',
    data: capital
}, {
    className: 'ct-profit',
    name: 'profit',
    data: profit
}];

var options = {
    height: 500,
    fullWidth: true,
    lineSmooth: false,
    showArea: false,
    showLine: true,
    showPoint: true,
    axisX: {
        labelOffset: {
            x: -3
        }
    },
    axisY: {
        offset: 0,
        showLabel: false
    },
    chartPadding: {
        top: 8,
        left: 24,
        right: 24,
        bottom: 0
    }
};

new Chartist.Line('#ct-chart', {
    labels: labels,
    series: series,
}, options);

And last, my CSS :

* {
    margin: 0px;
    padding: 0px;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    color: #212121;
    font-family:'Roboto', 'sans-serif';
}

 .min-height-100 {
    min-height: 100px;
}

 body, html {
    background-color: #eee;
}

.content {
    padding: 8px;
    max-width: 1028px;
    margin: auto;
    overflow: auto;
}

.box {
    margin: 8px;
    border: 1.5px solid #ddd;
    background-color: #FFF;
    box-shadow: 0px 2px 10px 0px rgba(167, 167, 167, 0.35);
}

 .box-header {
    width: 100%;
    display: table;
}

.box-header .header {
    padding: 16px;
    font-size: 1.1em;
    font-weight: 600;
    display: table-cell;
}

.box-footer {
    padding: 16px;
    display: block;
    font-size: 0.8em;
    font-weight: 500;
    text-align: center;
    border-top: 1.5px solid #ddd;
}

 .chart {
    padding: 16px;
    border-top: 1.5px solid #ddd;
}

.box-legend p {
    display: inline-block;
}

.box-legend p:not(:last-child) {
    margin-right: 24px;
}

.box-legend .fa {
    margin-right: 8px;
}

 #ct-chart .ct-line {
    stroke-width: 3px;
    stroke-linecap: round;
}

#ct-chart .ct-point {
    opacity: 0.5;
    cursor: pointer;
    stroke-width: 12px;

    transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
}

#ct-chart .ct-point:hover {
    opacity: 1;
    stroke-width: 24px;
}

#legend-income, #ct-chart .ct-income .ct-line, #ct-chart .ct-income .ct-point {
    color: #673AB7;
    stroke: #673AB7;
}

#legend-capital, #ct-chart .ct-capital .ct-line, #ct-chart .ct-capital .ct-point {
    color: #2196F3;
    stroke: #2196F3;
}

#legend-profit, #ct-chart .ct-profit .ct-line, #ct-chart .ct-profit .ct-point {
    color: #E91E63;
    stroke: #E91E63;
}

You can see the sample in this fiddle.

[chandana-bandara]

I’ve just added

.ct-chart-line{
        overflow:visible !important;
}

in the page and the cropping at the bottom problem fixed for me.

[ganar]

I want to reopen this issue, because it is still present. When the chart is set in a grid container the @coolbit solution is the only thing that helps to show the entire chart. This is not enough though. The width of chart on the right is wrong (look at the superimposed grid, it should leave empty the middle column.

Upon resizing the window, the chart reduces in size, fitting in the asigned grid position

The chart on the right has the same settings, but it does not get clipped, like the one on the left. Do note that the amount of clipping seems to coincide with the offset: 120 applied on the axisY which is the same in both cases .