Bootstrap 4 Tab On Click Does not Fill Content

Question

I have a bootstrap row with 4 columns (col-lg-3). Within one of the columns is a tab-content element. When the page renders, the javascript populates and fills the card correctly, however, when I click on the next tab the content overflows the box and does not render within the div width at all.

I have tried adding style="width:200px" to any and all of the div containers within this column, but none of them will yield when I click the tab.

Tab Content Code:

<div class="col-lg-3 align-items-stretch">
    <div class="card">
        <div class="card-header bg-14">
            <h2><?php echo $lang_top_airlines ?></h2>
        </div>
        <div class="card-body">
            <div class="tab-content" id="nav-TopAirlines" style="width:250px">
                <div class="tab-pane fade show active" id="nav-airlines-flights" role="tabpanel" aria-labelledby="nav-airline-flights">
                    <?php 
                    $path = $_SERVER['DOCUMENT_ROOT'];
                    $path .= "/includes/connections/mysqli.php";
                    require($path);
                    $sql = "SELECT
                                COUNT(*) AS countLVM,
                                lvm.luchtvaartmaatschappij AS naam,
                                lvm.IATACode
                            FROM
                                tbl_vluchtgegevens vg                                                       
                            LEFT JOIN
                                tbl_luchtvaartmaatschappij lvm
                                ON vg.luchtvaartmaatschappij = lvm.luchtvaartmaatschappijID
                            WHERE
                                vertrekdatum2 <= NOW()
                            GROUP BY
                                lvm.luchtvaartmaatschappij
                            ORDER BY
                                countLVM DESC
                            LIMIT 10";
                    $dataAF = $link->query($sql);
                    $dataPointsAF = array();
                                                
                    if ($dataAF->num_rows > 0) {
                        while ($rowAF = $dataAF->fetch_assoc()) {
                            $pointAF = array(
                                "label" => $rowAF['IATACode'],
                                "y" => $rowAF['countLVM'],
                                "name" => $rowAF['naam']
                            );
                            array_push($dataPointsAF, $pointAF);
                        }
                    }
                    $link->close();        
                    ?>
                    <div id="TopAirlinesFlights" style="width: 200px; height: 300px;"></div>
                </div>
                <div class="tab-pane fade" id="nav-airlines-distance" role="tabpanel" aria-labelledby="nav-airline-distance">
                    <?php 
                    $path = $_SERVER['DOCUMENT_ROOT'];
                    $path .= "/includes/connections/mysqli.php";
                    require($path);
                    $sql = "SELECT
                                lvm.luchtvaartmaatschappij AS naam,
                                lvm.IATACode,
                                SUM(vr.afstand) AS SumDistance
                            FROM
                                tbl_vluchtgegevens vg
                            LEFT JOIN
                                tbl_vliegroutes vr
                                ON vg.vertrekluchthaven = vr.vertrekID
                                    AND vg.aankomstluchthaven = vr.aankomstID
                            LEFT JOIN
                                tbl_luchtvaartmaatschappij lvm
                                ON vg.luchtvaartmaatschappij = lvm.luchtvaartmaatschappijID
                            WHERE
                                vg.vertrekdatum2 <= NOW()
                            GROUP BY
                                lvm.luchtvaartmaatschappij
                            ORDER BY
                                SumDistance DESC
                            LIMIT 10;";                                   
                    $dataAirD = $link->query($sql);
                    $dataPointsAirD = array();
                    if ($dataAirD->num_rows > 0) {
                        while ($rowAirD = $dataAirD->fetch_assoc()) {
                            $pointAirD = array(
                                "label" => $rowAirD['IATACode'],
                                "y" => $rowAirD['SumDistance'],
                                "name"=> $rowAirD['naam']
                            );
                            array_push($dataPointsAirD, $pointAirD);
                        }
                    }
                    $link->close();        
                    ?>
                    <div id="TopAirlinesDistance" style="width: 200px; height: 300px;"></div>
                </div>
            </div>
            <nav>
                <div class="nav nav-fill nav-pills" id="nav-airline" role="tablist">
                    <a class="nav-item nav-link active" role="tab" id="nav-airline-flights" data-toggle="tab" href="#nav-airlines-flights" aria-controls="nav-airlines-flights" aria-selected="true">
                        <i class="fas fa-plane-departure"></i>&nbsp;&nbsp;by Flights
                    </a>
                    <a class="nav-item nav-link" role="tab" id="nav-airline-distance" data-toggle="tab" href="#nav-airlines-distance" aria-controls="nav-airlines-distance" aria-selected="false">
                        <i class="fas fa-map-marked-alt"></i>&nbsp;&nbsp;by Distance
                    </a>
                </div>
            </nav>
        </div>
    </div>
</div>

Javascript Code (just in case I'm missing something here):

<script type="text/javascript">
$(function () {
    CanvasJS.addColorSet(
        "blueShades2",
        [ //colorSet Array
            "#074b83",  
            "#085a9d",  
            "#0a69b7",
            "#0b78d1",
            "#0c87eb",
            "#2196f3",
            "#4daaf6",
            "#79bff8",
            "#a6d4fa",
            "#d2eafd"
        ]
    );      
    var TopAirports = new CanvasJS.Chart(
           "TopAirports",
           {
               zoomEnabled: false,
               axisX:{ 
                   reversed:  true
               },
               animationEnabled: true,      
               colorSet: "blueShades2",     
               toolTip:{content: "{name}: {y}"},
               data: [{
                   type: "bar",
                   indexLabelFontSize: 14,
                   indexLabel: "{y}",
                   indexLabelPlacement: "outside",  
                   indexLabelOrientation: "horizontal",
                   dataPoints: <?php echo json_encode($dataPointsTA, JSON_NUMERIC_CHECK); ?>
               }]
           }
        );  
    var TopAirlinesFlights = new CanvasJS.Chart(
            "TopAirlinesFlights",
            {
                zoomEnabled: false,
                animationEnabled: true,
                colorSet: "blueShades2",
                axisX:{ 
                    reversed:  true
                },
                toolTip:{content: "{name}: {y}"},
                data: [{
                    type: "bar",
                    indexLabelFontSize: 14,
                    indexLabel: "{y}",
                    indexLabelPlacement: "outside",  
                    indexLabelOrientation: "horizontal",
                    dataPoints: <?php echo json_encode($dataPointsAF, JSON_NUMERIC_CHECK); ?>
                }]
           }
        );
        
    var TopAirlinesDistance = new CanvasJS.Chart(
            "TopAirlinesDistance",
            {
                zoomEnabled: false,
                animationEnabled: true,
                colorSet: "blueShades2",
                axisX:{ 
                    reversed:  true
                },
                toolTip:{content: "{name}: {y}"},
                data: [{
                    type: "bar",
                    indexLabelFontSize: 14,
                    indexLabel: "{y}",
                    indexLabelPlacement: "outside",  
                    indexLabelOrientation: "horizontal",
                    dataPoints: <?php echo json_encode($dataPointsAirD, JSON_NUMERIC_CHECK); ?>
                }]
            }
        );

    TopAirlinesFlights.render();
    TopAirports.render();
    TopAirlinesDistance.render();
});
</script>

Answer 1

If you know the width will need to be 200px then you can set: max-width:200px.

You will need to use Media Queries though to keep adjusting the max-width value when the screen size changes to a bigger screen. If you don't then it will always stay at 200px.