Iframe does not respect max-width

Question

The iframe is responsive and works perfectly when I do it in prototype. But in this case I do not know why it does not obey the max-width of his father’s knot. It always gets much smaller than the space I free up for him in max-width of his father’s knot.

I wanted him to be responsive and fill up the father knot(#contatoendereco) whole as much as you can.

Note: I noticed that whenever I remove the granny knot(#containercontato) it works! I don’t know why.

Dit: when I say iframe, it is assumed wrong that it is the #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%;
}

<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>