CSS Flexbox Not Centering Items Vertically Within a 100% Height Container in Chrome 117
I'm sure I'm missing something obvious here, but I'm trying to center a set of flex items vertically within a container that is set to 100% height, but it seems to be misbehaving in Chrome 117. I have the following setup: ```html <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> </div> ``` ```css html, body { height: 100%; margin: 0; } .container { display: flex; flex-direction: column; justify-content: center; height: 100%; background-color: lightgray; } .item { padding: 20px; border: 1px solid black; margin: 5px; } ``` Despite setting the `justify-content` property to `center`, the items are not vertically centered in the container. Instead, they seem to stack at the top of the container. I also added `height: 100%` to both `html` and `body`, thinking that might help, but it hasn't changed anything. I've tried using `align-items: center`, but that seems to have no effect here since I'm dealing with a column layout. I even checked the browser console for any layout errors, but it appears to be a CSS scenario rather than an HTML structure one. This works as expected in Firefox but consistently fails in Chrome. Is there something I'm missing or a known scenario with flexbox in Chrome 117? Any insights would be appreciated! Has anyone else encountered this? This is part of a larger service I'm building. Any ideas what could be causing this?