I have this really specific HTML setup. This is a minimal reproducible example for the issue I'm dealing with. It really needs to have a canvas there with width: 100% and height: 100%, otherwise it does not work.
<!DOCTYPE html><html><body style="display: flex;"><div style="display: flex;"><div style="flex: 1; background-color: red;"><div id="blue-div" style="max-width: 150px; background-color: blue;">1</div></div><div style="flex: 1; background-color: green;"><canvas style="width: 100%;height: 100%;"></canvas></div></div><button onclick="document.querySelector('#blue-div').innerHTML += '1'"> Increase text length</button></body></html>You can see an element with innerHTML of 1. It has the max width set to 150px, and it indeed displays with a width of 150 in my browser. Its red parent has dimensions of 154.467x82.25, so a bit wider. However, when I start adding letters to that lonely 1, the red div begins to expand. I don't understand this. The blue div containing the 1 does not change due to the fixed max-width, but its parent somehow does. When the text does not even nearly fill the blue div. How is this possible? Red div expands until it hits the width of 225, then it stops.