CSS `display: contents` optimization guide as expected in Safari 16 when combined with `grid` and `flex` layouts
I keep running into I'm working on a project and hit a roadblock... This might be a silly question, but Hey everyone, I'm running into an issue that's driving me crazy. I'm working with an scenario where using `display: contents` on a parent element doesn't seem to work in Safari 16 while it works perfectly fine in Chrome and Firefox. I have a grid layout that includes some flex items inside a parent container. The intention was to have the parent act as a layout container while not affecting the child elements' styling or positioning. However, in Safari, the child elements are not rendered correctly, and I see unexpected gaps between them. Here's a simplified version of my HTML and CSS: ```html <div class="parent"> <div class="child flex-item">Item 1</div> <div class="child flex-item">Item 2</div> <div class="child flex-item">Item 3</div> </div> ``` ```css .parent { display: contents; } .child { display: flex; justify-content: space-between; margin: 10px; background-color: #f0f0f0; } ``` In Safari, the children are not aligned properly and there are irregular spaces between them. I also checked with a minimal setup and still had the same scenario. I tried replacing `display: contents` with a regular `div`, but that defeats the purpose of the layout I was aiming for. Has anyone encountered this question or does anyone know of any potential workarounds to achieve a similar layout without using `display: contents`? Any help would be greatly appreciated! I'm using Html/Css stable in this project. I'd be grateful for any help. What's the best practice here? I'm working in a CentOS environment. I'm working in a Windows 11 environment. Has anyone else encountered this?