CSS Grid Not Respecting Row Heights When Using minmax() - Seeking Insight
I'm updating my dependencies and I've been banging my head against this for hours... I'm having an scenario with CSS Grid where the `minmax()` function isn't behaving as expected for row heights. I have a simple grid layout using CSS Grid, and I want the first row to have a minimum height of 100px and a maximum height of 200px. However, the row seems to be collapsing when there's not enough content, and it doesn't respect the minimum height. Here's the code I'm using: ```css .container { display: grid; grid-template-rows: minmax(100px, 200px) 1fr; gap: 10px; } .item { border: 1px solid #ccc; padding: 20px; } ``` And my HTML looks like this: ```html <div class="container"> <div class="item">Row 1</div> <div class="item">Row 2</div> </div> ``` When I view this layout, Row 1 sometimes ends up being less than 100px tall if the content doesn’t fill that space. I'm testing this in Chrome 100, and I've checked the computed styles, and it shows that the height is being set less than 100px. I also tried using `grid-template-rows: auto 1fr;` but that didn't help either. Is there something I'm missing with how `minmax()` works in this context? Should I be using other properties or settings? Any insights would be appreciated. What's the best practice here? Thanks for any help you can provide!