Column Resizing

<!DOCTYPE html>
<html lang="en">
<head>
<script> var __basePath = ''; </script>
<style> html, body { margin: 0; padding: 0; height: 100%; } </style>
    <script src="https://unpkg.com/ag-grid-community@20.2.0/dist/ag-grid-community.min.js"></script>    <link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="outer-div">
    <div class="button-bar">
        <button onclick="sizeToFit()">Size to Fit</button>
        <button onclick="autoSizeAll()">Auto-Size All</button>
    </div>
    <div class="grid-wrapper">
        <div id="myGrid" style="height: 100%;" class="ag-theme-balham"></div>
    </div>
</div>

    <script src="main.js"></script>
</body>
</html>

var columnDefs = [
    {field: "athlete", width: 150, suppressSizeToFit: true},
    {field: "age", width: 90, minWidth: 50, maxWidth: 100},
    {field: "country", width: 120},
    {field: "year", width: 90},
    {field: "date", width: 110},
    {field: "sport", width: 110},
    {field: "gold", width: 100},
    {field: "silver", width: 100},
    {field: "bronze", width: 100},
    {field: "total", width: 100}
];

var gridOptions = {
    defaultColDef: {
        resizable: true
    },
    columnDefs: columnDefs,
    rowData: null,
    onColumnResized: function(params) {
        console.log(params);
    },
    suppressDragLeaveHidesColumns: true
};

function sizeToFit() {
    gridOptions.api.sizeColumnsToFit();
}

function autoSizeAll() {
    var allColumnIds = [];
    gridOptions.columnApi.getAllColumns().forEach(function(column) {
        allColumnIds.push(column.colId);
    });
    gridOptions.columnApi.autoSizeColumns(allColumnIds);
}

// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
    var gridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(gridDiv, gridOptions);

    // do http request to get our sample data - not using any framework to keep the example self contained.
    // you will probably use a framework like JQuery, Angular or something else to do your HTTP calls.
    var httpRequest = new XMLHttpRequest();
    httpRequest.open('GET', 'https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json');
    httpRequest.send();
    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState === 4 && httpRequest.status === 200) {
            var httpResult = JSON.parse(httpRequest.responseText);
            gridOptions.api.setRowData(httpResult);
        }
    };
});

.outer-div {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.button-bar {
    padding-bottom: 4px;
}

.grid-wrapper {
    height: 20px;
    flex: 1;
}