Масштабировать холст пропорционально внутри flexbox

Question

Предположим, у меня есть следующий HTML:

<div>
  <canvas class="colorPicker" width="800" height="800"></canvas>
  <canvas class="colorPicker" width="800" height="800"></canvas>
</div>

И этот CSS:

div {
  display: flex;
  width: 100%;
  overflow: hidden;
}

div > canvas{
  flex-grow: 1;
  flex-shrink: 1;
  width: 50%;
}

Полотна не масштабируются пропорционально.Они выше, чем они широкие.Это видно, когда я рисую круги на холсте.

(JSFiddle: https://jsfiddle.net/08rckfek/)

Почему это происходит?

Если я не использую flexbox в родительском div, полотна масштабируются правильно.

Кроме того, кажется странным, что мне вообще нужно указывать width: 50%. flex-shrink игнорируется, даже если я укажу основу.

Как создать ряд полотен, которые автоматически пропорционально масштабируются в зависимости от ширины родительского flexbox?

Answer 1

Вам необходимо установить align-items, так как по умолчанию его значение равно stretch

document.addEventListener('DOMContentLoaded', (e) => {
	document.querySelectorAll('canvas.colorPicker').forEach((canvas) => {
  
  const ctx = canvas.getContext('2d');
  const centerX = canvas.width / 2;
  const centerY = canvas.height / 2;
  const radius = Math.min(canvas.width, canvas.height) / 2;

  // Base white circle, so middle has a full color
  ctx.beginPath();
  ctx.arc(centerX, centerY, radius/2, 0, 2*Math.PI, false);
  ctx.closePath();
  ctx.fillStyle = '#fff';
  ctx.fill();

  for (let angle=0; angle<=360; angle+=1) {
    const startAngle = (angle-2)*Math.PI/180;
    const endAngle = angle * Math.PI/180;
    ctx.beginPath();
    ctx.moveTo(centerX, centerY);
    ctx.arc(centerX, centerY, radius, startAngle, endAngle);
    ctx.closePath();

    const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, radius);
    gradient.addColorStop(0, 'hsl(' + angle + ', 100%, 100%)');
    gradient.addColorStop(0.5, 'hsl(' + angle + ', 100%, 50%)');
    gradient.addColorStop(1, 'hsl(' + angle + ', 100%, 0%)');
    ctx.fillStyle = gradient;
    ctx.fill();
  }
});
});

div {
  display: flex;
  width: 100%;
  overflow: hidden;
  align-items:flex-start;
}

div > canvas{
  flex-grow: 1;
  flex-shrink: 1;
  width: 50%;
}

<div>
  <canvas class="colorPicker" width="800" height="800"></canvas>
  <canvas class="colorPicker" width="800" height="800"></canvas>
</div>