How to auto-resize canvas within a flex item?

This is similar to the “how do I make Kanva responsive”, but it’s a bit of a different issue.

This is essentially what I have:

<div style="display: flex">
  <div style="flex-shrink: 0">---</div>
  <div style="flex-grow: 1" class="waveform">(Konva stage drawn here)</div>
  <div style="flex-shrink: 0">---</div>
</div>

The issue is, when I resize my window, the .waveform div shrinks accordingly since it’s a flex item, but since there’s a Konva div & canvas inside with a set width of (for example) 800px, the .waveform div won’t shrink, resulting in this:

So I can’t use stage.width() to set the new .waveform offsetWidth because it’s not actually changing. How do I make this Konva stage responsive within a flex item?

[lavrton]

I am not 100% sure what is flex behavior here. Probably it is not getting smaller, because Stage is using the space.

In a similar issue I did this:

1. add position: relative to the parent of the stage. .waveform in your case.
2. use position: absolute; width: 100% for stage container.
3. Update the stage size of container width.

[lavrton]

Nice!