How to make a HTML5 canvas fit dynamic parent/flex box container

Question

Is there a way I can create a canvas inside a dynamic re-sizing flex-box container?

Preferably a CSS only solution but I think JavaScript is required for redraw?

<

Answer 1

One other solution is to create a new containing block, and make it follow the formatting context:

const Canvase = styled.canvas`
  flex: auto;
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
`;

It is somewhat complimentary/orthogonal to the object-fit: ... suggested by Temani and Peter