我試著做一個小容器來顯示一些信息，但是你可以在例子中看到它的邊被切掉了。

我的HTML和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;
}

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

在. mensajes上使用內部填充。您總是希望在文本的左側和右側添加比頂部多33%的填充，以便均勻地構建文本。

.mensajes 
{
  width: 40%;
  margin-left: 12%;
  padding: 0.5em;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  background-color: #111111a6;
  
  border-radius: 0 10px 10px;
}

.mensaje 
{
  width: 95%;
  padding: 6px 8px;

  background-color: maroon;
  color: #fff;
  
  border-radius: 5%;
}

<div id="mapa" class="mapa">
  <div class="mensajes" id="mensajes">
    <div class="mensaje">
      The text goes here
    </div>  
    </div>
  <div class="coordenadas">
    <b id="latitud" style="color: blue;"></b><br>
    <b id="longitud" style="color: red;"></b>
  </div>
</div>