While experimenting with the resize property in CSS, I encountered an issue. I have a div that contains a canvas element.
.resizable {
resize: both;
overflow: hidden;
border: 1px solid black;
}
div {
height: 300px;
width: 300px;
}
canvas {
height: 100%;
width: 100%;
}<div class="resizable">
<canvas></canvas>
</div>In Chrome 76, when using this configuration, I found that the div cannot be resized. Dragging the resize handle has no effect. (It works in Firefox)
If I disable the pointer-events on the canvas or make the canvas smaller, then it works as intended: https://jsfiddle.net/t085nv9r/.
My assumption is that this behavior occurs because the canvas is covering the handle when its size is set to 100% of the parent. However, I believe that events should bubble up to the parent so even if the canvas is capturing an event, unless there is a stopPropagation method being called, the div should receive it and trigger the resize action.
What am I missing?
EDIT: When setting the overflow to scroll, scroll bars are added to the div which prevents the canvas from covering the whole area, making the resize handle work correctly. Nonetheless, this solution isn't ideal for me as I prefer not to have unnecessary scroll bars in my div.