CSS Flexbox Distributing Space Incorrectly in Latest Chrome Version 117 with Variable Height Children
I'm reviewing some code and I'm performance testing and I can't seem to get Quick question that's been bugging me - This might be a silly question, but I'm having trouble with a flexbox layout where the space distribution is not behaving as expected, particularly in Chrome version 117... I have a parent container set to `display: flex;`, and its children are of variable heights. I want the children to evenly distribute the available space, but instead, they are squishing together, leaving a lot of empty space in the flex container. Here's the relevant CSS: ```css .container { display: flex; justify-content: space-between; align-items: stretch; height: 300px; } .child { flex: 1; margin: 10px; background-color: lightblue; } ``` And hereโs the HTML structure: ```html <div class="container"> <div class="child" style="height: 50px;">Child 1</div> <div class="child" style="height: 100px;">Child 2</div> <div class="child" style="height: 150px;">Child 3</div> </div> ``` In Firefox and Safari, this works perfectly, distributing the space correctly based on the heights of the children. However, in Chrome, the children seem to ignore the `flex: 1;` rule, and it looks like they are trying to maintain their intrinsic sizes instead of stretching to fill the container. I even tried adding `min-height: 0;` to the children to see if it would help, but that didnโt change anything. Additionally, I inspected the computed styles in Chrome DevTools, and they donโt seem to indicate any conflicting styles. Has anyone else encountered this issue with Chrome, or does anyone have suggestions for a workaround to ensure the flex items distribute space evenly regardless of their height? This is part of a larger web app I'm building. This is part of a larger service I'm building. Any ideas what could be causing this? This issue appeared after updating to Css LTS. Is this even possible? This is happening in both development and production on Ubuntu 20.04. Any suggestions would be helpful.