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 max width set to 150px and it indeed displays with a width of 150 in my browser. It's 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 starts expanding. I dont understand this. The blue div containing the 1 does not change due to 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.