O iframe
fica responsivo e funciona perfeitamente quando o faço em protótipo. Porém nesse caso não sei por que ele não obedece o max-width
de seu nó pai. Ele sempre fica bem menor do que o espaço que eu libero para ele em max-width
de seu nó pai.
Eu queria que ele fosse responsivo e preenche-se o nó pai(#contatoendereco
) inteiro o quanto puder.
Obs: reparei que sempre que retiro o nó avó(#containercontato
) ele funciona! não sei porque.
edit: quando digo iframe, assume-se erradamente que é o #map-resposive
(iframe encapsulado).
-------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>