Text Not Wrapping Correctly in CSS Grid with Fixed Height Rows in Chrome 116
I'm collaborating on a project where I'm migrating some code and I've searched everywhere and can't find a clear answer. I'm working with an scenario where text within grid items is not wrapping as expected when using fixed height rows. I'm currently using CSS Grid in a project styled with vanilla CSS, and I'm seeing this question specifically in Chrome 116. My grid has a fixed height set for each row, but when there's overflow text, it's not wrapping and instead cutting off the content. It appears that setting the grid item height to `auto` solves the scenario, but I need to maintain a specific row height. Here's my CSS code: ```css .container { display: grid; grid-template-rows: 100px 100px; grid-template-columns: 1fr 1fr; gap: 10px; } .item { background-color: lightgray; height: 100%; /* Fixed height */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* Prevents wrapping */ } ``` And the HTML structure looks like this: ```html <div class="container"> <div class="item">This is a very long text that should wrap but doesn't due to the fixed height.</div> <div class="item">Short text</div> </div> ``` I’ve tried removing `white-space: nowrap;`, but that causes the text to overflow, and I still don't want the items to grow in height. Is there a way to achieve text wrapping within fixed height grid items while preventing overflow in Chrome without changing the overall layout? Any insights would be greatly appreciated! I'm working on a web app that needs to handle this. Is there a better approach? This is for a CLI tool running on Windows 11. Could this be a known issue? I've been using Css for about a year now.