How to design the notification container in CSS?-CodePudding

I have a task - to make a notification display for some web-application. The notifications appear in the bottom right corner of the window and disappear after some time. Or the notifications can be gone by clicking on a notification item. If there are multiple notifications, they should be stacked. Each new notification moves the notification stack up. If the stack of notifications grows larger than the height of the window, then the top older notifications must move to the next stack, which must be displayed to the left of the newer notification stack. Similarly, if the second stack reaches the height of the window, then the oldest notifications should move to the third stack.

Schematically, it should look like this:

I was able to obtain the correct order of displaying notifications, but I can't get the notification container to be positioned against the right edge of the window.

function notify(msg) {
  let element = document.createElement('div');
  element.classList.add('notification');
  element.innerHTML = msg;
  let timeout;
  element.onclick = () => element.remove();
  element.onmouseenter = () => clearTimeout(timeout);
  element.onmouseleave = () => createTimeout();
  createTimeout();
  let recentElement = container.firstElementChild;
  if(recentElement) recentElement.before(element);
  else container.appendChild(element);
  indicator.innerHTML='Last msg is ' msg;
  function createTimeout() {
    timeout = setTimeout(() => { 
      element.remove() 
    }, 10000);
  }
}

let notifyIndex = 0;

x1.onclick = () => {
  notify(  notifyIndex);
}
x10.onclick = () => {
  for (let i = 0; i < 10; i  )
    notify(  notifyIndex);
};
x30.onclick = () => {
  for (let i = 0; i < 30; i  )
    notify(  notifyIndex);
};

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
}
.action-list button {
  width: 4rem;
  margin .5rem
}
#container {
  position: fixed;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  flex-wrap: wrap-reverse;
  align-content: flex-end;
  align-items: flex-end;
  bottom: 0;
  right: 30px;
  max-height: 100vh;
}
.notification {
  transition: all 500ms ease-in-out;
  box-shadow: 0 0 1rem #0004;
  margin: 0 1rem 1rem 0;
  background: #f9f99f;
  color: #000;
  border: 1px solid #0008;
  padding: .2rem 1rem;
  cursor: default;
  user-select: none;
}

<div id="container"></div>

<div>
<div id="indicator">Last msg is 0</div>
<div >
  <button id="x1">x1</button>
  <button id="x10">x10</button>
  <button id="x30">x30</button>
</div>
</div>

I set an indentation of 30 pixels, so that you can see that the notifications go over the edge of the window. The idea is that stacks of recent notifications should not go over the edge of the window.

What am I doing wrong?

CodePudding user response：

position: fixed;
display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
flex-wrap: wrap-reverse;
align-items: flex-end;
bottom: 0;
right: 30px;
max-height: 100vh;

Try this, let me know if it works!

Tldr: Your Align-content: flex-end was making it grow to the right