Column Headers not aligned after expanding row.

I have my datatable setup like below. As you can see it has a fixed height with scrolling when there are enough rows that it is required. My issue is that when no row is expanded there is no scroll Y (veritcal) scroller visible as there aren't enough rows that it is required. Then after expanding the row the scroll bar is then displayed, taking up some space to the right of the table which causes the inner table to become a bit smaller width wise, but the headers do not adjust. I even tried to redraw them in the row expand click event. Let me know if you have any ideas. Thanks in advance!

var table = $('#main_table ').DataTable({
                            "data": orders.data,
              scrollY:        '60vh',
              scrollCollapse: true,
              scrollX: true,
              paging:         false,
                            "columns": [
                                    {
                                            "className": 'details-control',
                                            "orderable": false,
                                            "data": null,
                                            "defaultContent": '',
                                            "render": function () {
                                                    return '<i class="fa fa-plus-square" aria-hidden="true"></i>';
                                            },
                                            width:"15px"
                                    },
                                    { "data": "column1" },
                                    { "data": "column2" },
                                    { "data": "column3" },
                                    { "data": "column4" },
                                    { "data": "column5" },
                                    { "data": "column6" }
                            ],
                            "order": [[1, 'desc']],
                    });


                    // Add event listener for opening and closing details
                    $('#main_table tbody').on('click', 'td.details-control', function () {
                            var tr = $(this).closest('tr');
                            var tdi = tr.find("i.fa");
                            var row = table.row(tr);

                            if (row.child.isShown()) {
                                    // This row is already open - close it
                                    row.child.hide();
                                    tr.removeClass('shown');
                                    tdi.first().removeClass('fa-minus-square');
                                    tdi.first().addClass('fa-plus-square');
                            }
                            else {
                                    // Open this row
                                    row.child(format(row.data()),'child').show();
                                    tr.addClass('shown');
                                    tdi.first().removeClass('fa-plus-square');
                                    tdi.first().addClass('fa-minus-square');
                            }

              $($.fn.dataTable.tables( true ) ).DataTable().columns.adjust().draw();
                    });