HTML消息容器侧边被截断问题求助

我尝试制作一个用于展示消息的小型容器，但该容器的侧边出现了截断情况。HTML中的mapa容器使用display:flex布局，占据屏幕左半部分。

初始代码 #

CSS代码 #

.mensajes{
    position: absolute;
    max-height: 7%;
    width: 40%;
    margin-left: 12%;
    padding: 0.25%;
    z-index: 2;
    overflow: auto;
    display: grid;
    align-items: center;
    justify-items: center;
    background-color: #111111a6;
    border-radius: 0 0 5px 5px;
}

.mensaje{
    position: relative;
    width: 95%;
    padding: 5px;
    margin-top:2%;
    margin-bottom: 2%;
    height: fit-content;
    background-color: #9a9999bc;
    border-radius: 5px;
}

HTML及JavaScript代码 #

<div id="mapa" class="mapa">
  <div class="mensajes" id="mensajes"></div>
  <div class="coordenadas">
    <b id="latitud" style="color: blue;"></b><br>
    <b id="longitud" style="color: red;"></b>
  </div>
</div>
<script>
  msgsBox = document.getElementById("mensajes")
  mensaje = document.createElement("div")
  mensaje.classList.add("mensaje")
  mensaje.textContent= "No GPS detected, check your connection"
  mensaje.style.backgroundColor = "#FF5733B3"
  mensaje.style.color = "#E8E8E8"
  msgsBox.appendChild(mensaje)
  msgsBox.scrollTop = msgsBox.scrollHeight
</script>

编辑说明：已根据评论中的建议更新代码，问题现已解决。

内容的提问来源于stack exchange，提问作者Alejandro