How to prevent left aligned labels of flipped x-axis from ellipsing in highcharts

I have this Highchart chart https://jsfiddle.net/97jy24cz/ which displays some port trips. The problem is that labels are quite long and depending on the width of the container, they get ellipsed / cut off:

I want the labels to display fully and either:

(1) push the graph to the right

(2) Get split into two lines

but whichever setting i use, it doesn't happen. I suspect the issue is with scrollbar which makes reserveSpace incorrectly calculate the space, but not sure.

The code:

Highcharts.chart("container", {
  chart: {
    inverted: true,
  }, legend: {
    enabled: false,
  },
  plotOptions: {
    column: {
      dataLabels: {
        enabled: true,
        format: "{point.y:.0f}",
      },
    }
  },
  series: [
    {
      type: "column",
      data: [
        {
          name: "Rotterdam (Schiedam) --> Rotterdam (Europoort) (11 nm)",
          y: 27,
        },
        { name: "Flushing --> Zeebrugge (22 nm)", y: 23 },
        { name: "Zeebrugge --> Flushing (22 nm)", y: 22 },
        {
          name: "Rotterdam (Europoort) --> Rotterdam (Schiedam) (10 nm)",
          y: 14,
        },
        { name: "Antwerp --> Zeebrugge (47 nm)", y: 11 },
        { name: "Zeebrugge --> Antwerp (47 nm)", y: 10 },
        { name: "Hansweert --> Zeebrugge (36 nm)", y: 9 },
        { name: "Rotterdam (Europoort) --> Zeebrugge (89 nm)", y: 9 },
        { name: "Anna Jacobapolder --> Zeebrugge (51 nm)", y: 8 },
        { name: "Rotterdam (Europoort) --> Antwerp (57 nm)", y: 8 },
        { name: "Zeebrugge --> Hansweert (34 nm)", y: 8 },
        { name: "Zeebrugge --> Rotterdam (Schiedam) (85 nm)", y: 8 },
        { name: "Antwerp --> Rotterdam (Europoort) (60 nm)", y: 7 },
        { name: "Zeebrugge --> Rotterdam (Europoort) (89 nm)", y: 7 },
        { name: "Antwerp --> Flushing (28 nm)", y: 6 },
        { name: "Flushing --> Antwerp (31 nm)", y: 6 },
        { name: "Hansweert --> Rotterdam (Europoort) (49 nm)", y: 6 },
        { name: "Rotterdam (Europoort) --> Anna Jacobapolder (33 nm)", y: 6 },
        { name: "Rotterdam (Europoort) --> Flushing (63 nm)", y: 6 },
        { name: "Flushing --> Rotterdam (Schiedam) (57 nm)", y: 4 },
        { name: "Rotterdam --> Rotterdam (Europoort) (13 nm)", y: 4 },
        { name: "Rotterdam (Botlek) --> Rotterdam (Europoort) (6 nm)", y: 4 },
        { name: "Rotterdam (Europoort) --> Rotterdam (Botlek) (6 nm)", y: 4 },
        { name: "Anna Jacobapolder --> Flushing (30 nm)", y: 3 },
      ],
      dashStyle: "Solid",
    },
  ],
  xAxis: {
    labels: {
      style: {
        fontSize: "9px",
      },
      align: "left",
      reserveSpace: true
    },
    type: "category"
  },
  title: {
    text: "",
  }
})

You can achieve 1) with a width setting like so:

xAxis: {
    labels: {
       style: {
        fontSize: "9px",
        width: '300px' // or any other value you think will work
      },...

Wrapping is not recommended here - you could achieve it with useHTML and label formatter, but this will cause problematic overlap - columns positions are not recalculated when you use useHTML for labels.

Btw: wouldn't it be easier to use a bar chart type instead of the inverted column?