Iframe does not respect max-width

The iframe is responsive and works perfectly when I do it in prototype. But in this case I do not know why he does not obey the max-width of his parent node. It always gets much smaller than the space I release for it in max-width of its parent node.

I wanted it to be responsive and populate the parent node ( #contatoendereco ) as much as possible.

Note: I noticed that whenever I pull out the grandmother node ( #containercontato ) it works! I do not know why.

edit: When I say iframe, it is mistakenly assumed to be #map-resposive (encapsulated iframe).

------- JSFiddle -------

    '#containercontato {
        display: flex;
        flex-flow: row wrap;
        width: 100%;
    }

    #contatoendereco {
        display: flex;
        flex-flow: column;
        max-width: 600px;
        border: 1px solid;
    }

    #map-responsive {
        width: 100%;
        height: 100%;
        border: 1px solid black;
    }

    #map-responsive iframe {
        height: 100%;
        width: 100%;
    }'

HTML

<div id="containercontato">
        <div id="contatoendereco">
            <h1>Endereço</h1>
            <p>Av. Bernardino de Campos,</p>
            <p>98</p>        
            <p>São Paulo,</p>
            <p>SP 12345-678</p>
            <p>[email protected]</p>
            <div id="map-responsive">
                <iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3728.5346981934304!2d-41.11321798469949!3d-20.850487786095172!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xb942b79a95c33d%3A0x8f4c1261f8d0f08e!2sR.+Vinte+e+Cinco+de+Mar%C3%A7o%2C+373+-+Centro%2C+Cachoeiro+de+Itapemirim+-+ES%2C+29300-100!5e0!3m2!1spt-BR!2sbr!4v1490289308120"width="300" height="150" allowfullscreen="allowfullscreen"></iframe>
            </div>
        </div>
    </div>

'