I have a trivial flex layout here. The two vertical columns are the same size. Uncommenting the canvas element breaks the symmetry even when the width of the canvas is smaller than the width of its containing div.
Why, and how do I fix it?
<!DOCTYPE html>
<html>
<head>
<script src="/assets/live.js"></script>
<style>
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
margin: 0px;
background-color: blue;
border: 1px solid red;
display: flex;
}
div {
flex: 1 1 auto;
border: 1px solid green;
}
canvas {
border: 1px solid purple;
}
</style>
</head>
<body>
<div></div>
<div>
<!-- <canvas></canvas> -->
</div>
</body>
</html>
