Background Image Not Covering Full Div Height in Safari with Flexbox Layout
Could someone explain I'm maintaining legacy code that Hey everyone, I'm running into an issue that's driving me crazy. I'm experiencing a frustrating scenario where a background image is not covering the entire height of a div when using a flexbox layout in Safari. The layout works perfectly fine in Chrome and Firefox, but in Safari, the background image is cropped despite the div dimensions being set to 100% height and width. I've ensured that the div has a proper size by using flex properties. Here’s the relevant CSS: ```css .container { display: flex; flex-direction: column; height: 100vh; } .full-height { flex: 1; background-image: url('path/to/image.jpg'); background-size: cover; background-position: center; } ``` And the corresponding HTML: ```html <div class="container"> <div class="full-height"></div> </div> ``` In Safari, the div with the class `full-height` only shows part of the background image and doesn’t stretch to fill the full height of the flex container. I've tried setting `min-height` on the `.full-height` class, but that doesn’t seem to change the outcome. I also checked for any default styles or resets that might be affecting it, but everything looks good. Has anyone encountered this before or have any ideas on how to ensure the background image covers the entire div on Safari? What am I doing wrong? This is part of a larger microservice I'm building. Thanks, I really appreciate it! This issue appeared after updating to Css LTS. Could someone point me to the right documentation?