Div no se ajusta dentro de otro

[Tincho_Diablo]

Buenas tardes, llevo rato luchando para que un div que se carga con la api de google maps, se ajuste dentro del contenido de un div que actua de contenedor principal en el famoso template SB Admin v2 (para bootstrap). Adjunto una imagen del problema:

[URL="https://ibb.co/HVJ9yzy"]https://ibb.co/HVJ9yzy[/URL]

El div que contiene el mapa tiene el siguiente estilo (mediante CSS):

Código:

#map {
    margin: 10px;
    border: 10px;
    padding: 10px;
    width:auto;
    height:100%;
}

Alguna idea de como solucionarlo?

[Rafael]

No entendí basado en la imagen.

Pero te recuerdo que el height 100% no funciona si no hay en algún momento un elemento, digamos padre, con un alto definido.

Podrías usar por ejemplo un height: 50vh;

Puedes googlear "height 100 problem" para encontrar diferentes alternativas a tu problema específico.

Hay algunos "hacks" como poner
padding-bottom: 100% y un margin-bottom: -100%
ya que el padding y el margin están definidos en realidad por el ancho de la ventana, para darle consistencia al modelo de caja. Hay otros como poner una imagen transparente con la proporción, etc.

[DragonX]

responsive embed