Grid col 1fr behaviour vs percentages?

Hi all. Just struggling with positioning in a grid. My grid has 3 columns, with widths of 20%, 1fr and 20% respectively. The first 3 images above show what happens in a grid when I place the slider in each column. The columns that have widths defined as a percentage seem to behave as if overflow:hidden is applied. But column 2, which is 1fr, doesn't. To replicate this, change line 21 from col-start-1 to 2. The fix is to apply overflow-hidden to the element when it's in column 2 (image 4). I've no idea why this constrains the content rather than hiding the overflow, but it seems to. The problem is that this also prevents the absolute notification from breaking out of its parent. I can lift that notification out of the parent if need be, but it would be a pretty hacky job to position it in my actual layout. Codepen Demo. To replicate, first add grid-col-1 to line 21, then overflow-hidden Thanks 🙂