CSS Grid not respecting minmax values on responsive layout with overflow issues in Angular
I've searched everywhere and can't find a clear answer. After trying multiple solutions online, I still can't figure this out... I'm working with an scenario with CSS Grid in my Angular application where the `minmax` function seems to be ignored when resizing the window. I have defined a grid container with three columns using the following CSS: ```css .container { display: grid; grid-template-columns: repeat(3, minmax(200px, 1fr)); gap: 16px; } ``` Initially, it works as expected when the viewport is larger than 600px, but when I shrink the window, the grid items start overlapping each other instead of adhering to the defined minimum width of 200px. No matter how small the viewport gets, I get a layout where items overlap instead of stacking vertically or breaking to a new row. I also tried adding a `min-width` to the grid container itself, but that didn't help either. I’ve checked the console for any warnings or errors, and there’s nothing unusual showing up. The Angular version I'm using is 14.0.0, and I've cleared the browser cache, tried different browsers, and even tested on a mobile device. I suspect it might be an scenario with how CSS Grid interacts with Angular's change detection or rendering cycle, but I'm not sure. Has anyone experienced something similar or have any suggestions on how to ensure that the grid respects the `minmax` values without overlapping items? Any help would be greatly appreciated! This is part of a larger API I'm building. Is there a better approach? For context: I'm using Css/Angular on Ubuntu.