HTML Холст переполняет родительский, когда window.resize изменяет размер холста в другом порядке.

Question

Мне нужно 2 холста (A, B), и оба должны иметь разрешение 1: 1 для экрана (поэтому мне нужно устанавливать canvas.width = canvas.clientWidth после каждого изменения размера), и они должны заполнять родительский элемент. Когда я изменяю ширину окна назад и вперед, холст B начнет переполняться. Это происходит только тогда, когда в window.onresize я изменяю их размер по порядку AB, когда я изменяю их размер по порядку BA, все в порядке.

Немного сложно протестировать во фрагменте, поэтому здесь он находится в отдельном окне: https://ghost.sk/ab.html

function One(id) {
  this.canvas = document.getElementById(id);
  this.context = this.canvas.getContext('2d');
  // keep resolution 1:1 with screen
  this.canvas.width = this.canvas.clientWidth;
  this.canvas.height = this.canvas.clientHeight;
}

var a = new One('a'),
  b = new One('b');

function myResize() {
  // keep resolution 1:1 with screen
  a.canvas.width = a.canvas.clientWidth;
  a.canvas.height = a.canvas.clientHeight;
  a.context.fillText('a', 10, 10);
  // keep resolution 1:1 with screen
  b.canvas.width = b.canvas.clientWidth;
  b.canvas.height = b.canvas.clientHeight;
  b.context.fillText('b', 10, 10);
}

window.addEventListener('resize', myResize);
myResize();

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

canvas {
  outline: 1px solid cyan;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}

<div style="flex: 1; display: flex;">
  <canvas id="a"></canvas>
</div>

<div>
  <label>order A-B, b sometimes overflow on window resize</label>
  <div style="display: flex;">
    <canvas id="b" style="max-height: 1cm;"></canvas>
  </div>
</div>

Здесь во втором порядке фрагмента BA, когда вы изменяете размер, все работает, AA и B. остаются одинаковой ширины.

Это Немного сложно протестировать во фрагменте, поэтому он находится в отдельном окне: https://ghost.sk/ba.html

function One(id) {
  this.canvas = document.getElementById(id);
  this.context = this.canvas.getContext('2d');
  // keep resolution 1:1 with screen
  this.canvas.width = this.canvas.clientWidth;
  this.canvas.height = this.canvas.clientHeight;
}

var a = new One('a'),
  b = new One('b');

function myResize() {
  // keep resolution 1:1 with screen
  b.canvas.width = b.canvas.clientWidth;
  b.canvas.height = b.canvas.clientHeight;
  b.context.fillText('b', 10, 10);
  // keep resolution 1:1 with screen
  a.canvas.width = a.canvas.clientWidth;
  a.canvas.height = a.canvas.clientHeight;
  a.context.fillText('a', 10, 10);
}
  
window.addEventListener('resize', myResize);
myResize();

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

canvas {
  outline: 1px solid cyan;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}

<div style="flex: 1; display: flex;">
  <canvas id="a"></canvas>
</div>

<div>
  <label>order B-A, after resize everything is fine</label>
  <div style="display: flex;">
    <canvas id="b" style="max-height: 1cm;"></canvas>
  </div>
</div>

Вторая проблема заключается в том, что при вертикальном сжатии окна они оба переполняются.