CSS Transition optimization guide for Flexbox Item Height in Chrome 117
I'm trying to animate the height of a flexbox item when it expands on click, but the transition isn't working as expected in Chrome 117. I've set up a simple flex container with items that have a height that should grow from `0` to `100px` with a smooth transition. However, the transition seems to be ignored, and the height jumps instantly rather than transitioning smoothly. Here’s the relevant CSS and HTML: ```html <div class="flex-container"> <div class="flex-item" id="item1">Click me!</div> </div> ``` ```css .flex-container { display: flex; flex-direction: column; } .flex-item { height: 0; overflow: hidden; transition: height 0.5s ease; } .flex-item.expanded { height: 100px; } ``` In my JavaScript, I’m toggling the `expanded` class on click: ```javascript document.getElementById('item1').addEventListener('click', function() { this.classList.toggle('expanded'); }); ``` I’ve also tried defining the height in different units, like `vh`, but it still doesn’t animate smoothly. Interestingly, the transition works fine in Firefox and Edge. I’ve checked the developer console for any errors, but nothing stands out. Does anyone have insights on why this might be happening specifically in Chrome, or is there a known scenario with transitioning height on flex items?