How to prevent absolute element from going off screen?

Question

I'm setting up some conceptual functions (hence the probably botched way this is put together), but I'm running into an unforeseen issue with using position : absolute on the toast elements. On the right-hand products there's no issue besides the toast overlapping the products to its left (which is fine in this case), but when it triggers on the left column it extends outside the viewport. That's why the class="diamond" is outside the toast itself, so that it can remain static regardless of the toast's position, since I assume position : absolute is not the ideal positioning for the toast.

So my question is, how can I achieve the intended effect of the toast triggering but remaining inside the viewport? My intention is for the diamond to be "anchored" to the button, with the toast itself dynamic on the horizontal axis.

Click the red square to open the toast, and the green one inside to close it.

function open(event) {
  if (!event.target.closest(".product button")){
    return false;
  }
  
  const parent = event.target.closest(".product");
  const toast = parent.querySelector('.toast');
  const diamond = parent.querySelector('.diamond');
  
  toast.style.display = 'block';
  diamond.style.display = 'block';
}

function close(event) {
  if (!event.target.closest(".toast button")){
    return false;
  }
  
  const product = event.target.closest(".product");
  const toast = event.target.closest(".toast");
  
  product.querySelector('.diamond').style.display = 'none';
  toast.style.display = 'none';
}

addEventListener('click', open);
addEventListener('click', close);

.container {
  display : flex;
  flex-flow: row wrap;
  justify-content : space-around;
  height : 450px;
  width : 300px;
  background-color : grey;
}

.product {
  position : relative;
  height : 200px;
  width : 130px;
  background-color : blue;
}

.icon {
  position : absolute;
  top : 10px;
  right : 10px;
  height : 30px;
  width : 30px;
  background-color : red;
}

.diamond {
  position : absolute;
  display : none;
  height : 10px;
  width : 10px;
  top : 50px;
  right : 20px;
  background-color : black;
  transform : rotate(45deg);
}

.toast {
  position : absolute;
  display : none;
  width : 160px;
  height : 50px;
  top : 55px;
  right : 10px;
  background-color : black;
  border-style: solid;
  border-width : thin;
  border-color : red;
}

.close {
  position : absolute;
  display : block;
  width : 20px;
  height : 20px;
  top : 15px;
  right : 70px;
  background-color : green;
}

<div class="container">
  <div class="product">
    <button class="icon"></button>
    <div class="diamond"></div>
    <div class="toast">
      <button class="close"></button>
    </div>
  </div>
  <div class="product">
    <button class="icon"></button>
    <div class="diamond"></div>
    <div class="toast">
      <button class="close"></button>
    </div>
  </div>
  <div class="product">
    <button class="icon"></button>
    <div class="diamond"></div>
    <div class="toast">
      <button class="close"></button>
    </div>
  </div>
  <div class="product">
    <button class="icon"></button>
    <div class="diamond"></div>
    <div class="toast">
      <button class="close"></button>
    </div>
  </div>
</div>

Answer 1

This can be the possible solution. Please replace toast css with the below css:

.toast {
    position: absolute;
    display: none;
    width: 100%;
    height: 50px;
    top: 55px;
    right: 0;
    background-color: black;
    border-style: solid;
    border-width: thin;
    border-color: red;
}

Hope this will help you!