Google Maps iframe width="100%" not working in Chrome

Question

I'm using an iframe to import a Google map to my website.

I'm using this code:

HTML

and:

CSS
.iframe-maps {
    width: 80%;
}

I added the iframe inside a div as recommended on another thread, but it didn't budge.

This is working perfectly in Firefox (mobile and desktop) and Edge (same) though but not in Chrome. I don't know about Safari though. This seems pretty straitgh forward. Is there anything I'm missing here?

This only think I found about this issue is this: https://www.experts-exchange.com/questions/26706977/Iframe-auto-height-display-problem-in-Safari-Chrome.html but it's from 2010... and I suppose this issue has been fixed a long time ago?

user_421163 · Answer

width:80% (80% of parent width) works only if parent has defined width - as length or as percent. That's by CSS specification.

Check parent of your .iframe-maps as I am pretty sure it has something as width:auto or not defined at all.

user_8268644 · Answer

Try like this

 .iframe-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }

 .iframe-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }

Google Maps iframe width="100%" not working in Chrome

2 Answers