CSS Scroll Snap optimization guide on Nested Containers in Firefox 118
Does anyone know how to Quick question that's been bugging me - I'm a bit lost with This might be a silly question, but I'm relatively new to this, so bear with me... I'm trying to implement CSS Scroll Snap on a nested container setup, but I’m working with issues with it not working as expected in Firefox 118. I have a main container that has a flex layout, and inside it, I have several child containers that I want to snap into place when scrolling. However, it seems like the snap points are being ignored when I scroll inside the nested container. I’ve set up snap properties on both the parent and child elements, but it just doesn’t seem to trigger the snap behavior. Here’s a simplified version of my CSS: ```css .container { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; } .item { flex: 0 0 100%; scroll-snap-align: start; height: 300px; background: lightblue; border: 1px solid #ccc; } ``` And my HTML: ```html <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div> ``` I’ve also tried adding `overflow: hidden;` to the parent container, but then the scrolling doesn’t work at all. The question continues even when I try to set `scroll-snap-type: y mandatory;` on the nested container. I checked the Firefox dev tools and there are no console errors, just the snap effect simply isn’t activating as expected when scrolling. Has anyone else encountered this scenario, or does anyone know if there's a specific requirement for nested scroll snaps in Firefox? This is part of a larger API I'm building. Has anyone else encountered this? I'm using Css 3.11 in this project. This is part of a larger REST API I'm building. Is there a better approach? This is happening in both development and production on Debian.