Canvas in Flexbox with flex-direction: column;

[BodyLAB]

Hallo zusammen,

ich hab ein Problem mit meinem Canvas und der Flexbox.
Würde sehr gerne ein paar Kreis-Diagramme auf einer Seite anzeigen. Das ganze sieht in HTML so aus:

        <div class="row">
                <div class="column">
                    <canvas id="test_canvas3" width="400" height="250"></canvas>
                </div>
                <div class="column">
                    <canvas id="test_canvas4" width="400" height="250"></canvas>
                </div>
            </div>

Mit JavaScript erzeuge ich die canvas:

function drawPieChart(data, colors, title, id) {
  var canvas = document.getElementById(id);
  var context = canvas.getContext("2d");
  var dataLength = data.length;

  var total = 0;

  for (var i = 0; i < dataLength; i++) {
    total += data[i][1];
  }

  var x = 100;
  var y = 100;
  var radius = 100;
  var startingPoint = 0;

  for (var i = 0; i < dataLength; i++) {
    var percent = data[i][1] * 100 / total;
    var endPoint = startingPoint + (2 / 100 * percent);
    context.beginPath();
    context.fillStyle = colors[i];
    context.moveTo(x, y);
    context.arc(x, y, radius, startingPoint * Math.PI, endPoint * Math.PI);
    context.fill();
    startingPoint = endPoint;


    context.fillStyle = colors[i];
    context.fillText(data[i][0] + " (" + data[i][1] + ")", 245, 25 * i + 15);
    context.fillStyle = "black";
  }
  context.font = "20px Arial";
  context.textAlign = "center";
  context.fillText(title, 100, 225);
}

Die CSS Klassen sehen wie folgt aus:

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }
 
  .column {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
  }

Das ganze schaut dann in meinem Browser wie im Dateianhang Unbenannt.png aus.
Wenn ich nun aus der CSS Klasse .column die flex-direction raus nehme sieht es wie gewünscht aus in Unbenannt2.png.

Wieso verhält sich das Canvas so? Also wieso vergrößert es sich obwohl es doch nur width="400" height="250" haben sollte?
Kann mir das vielleicht jemand erklären.

Danke im voraus