JSFiddle - React, Tailwind, and code Playground
HTML
Act like there's a resize striped handler on the bottom right corner (even if it's not visible in Chrome).<br>
Try to "grab it" and resize the DIV parent of image.<br>
Now, try the same with the one holding the canvas element<br>
<div>
<img src="//placehold.it/150x150/f50">
</div>
<div>
<canvas></canvas>
</div>
<br>Chrome... What's stopping from:<br>
- Making the handler visible?<br>
- Resize the DIV when it's child is CANVAS?
CSS
div{
resize: both; /* I want it. Really*/
display: inline-block;
vertical-align: top;
position: relative;
overflow: hidden;
background: gold;
}
img,
canvas {
display: inline-block;
vertical-align: top;
background: red;
}