Como hacer que un div hijo no se salga de un div padre

[Jose789]

Bueno pues resulta que tengo algo así:

Código HTML:

<div id="mini-map-pos" style="top: 50px; left: 10px; color: white; background: rgba(0, 0, 0, 0.8); font-size: 14px; font-weight: 800; position: fixed; padding: 0px 10px;"></div>
 
<div id="mini-map-wrapper" style="position: fixed; bottom: 10px; right: 10px; width: 150px; height: 150px; background: url(http://i.imgur.com/8J8LU9O.png);">
    <div id="mini-map" style="width: 100%; height: 100%; position: relative;">
        <div id="mini-map-token" style="position: absolute; width: 5%; height: 5%; background: rgb(255, 59, 7); top: 17.1125%; left: 56.708%;"></div>
    </div>
</div>
 

pero resulta que el div mini-map-token no respeta la anchura y la altura del div padre. y siempre acaba viéndose donde no debe.

para que lo veáis mejor: https://jsfiddle.net/7xjmr17r/

Gracias por adelantado

[AngelKrak]

entonces donde tendria que verse?
podrias poner algun ejemplo de como no tiene que verse y como tiene que verse ._.?

[Jose789]

Iniciado por AngelKrak

entonces donde tendria que verse?
podrias poner algun ejemplo de como no tiene que verse y como tiene que verse ._.?

como no tiene que verse:


Como tiene que verse:


El cuadrado rojo se ha de poder mover pero sin salir del mapa... no se si me he llegado a explicar.