Position absolute inside an overflow-x scroll

Issue

Here's the codepen: https://codepen.io/CEBOK555/pen/NWyzvzx

I have a container who takes 100% of the width screen, with a save button ALWAYS on the top right of the container.

.container {
  width: 100vw;
  overflow: auto;
  position: relative;
  white-space: nowrap;
}

button {
  position: absolute;
  right: 20px;
  top: 10px;
}

When there is only one article, the position absolute is working and the display is ok.

But when there is multiple articles, I can scroll inside the container, but the button is relative to the screen and not the width of the container. I want my button in this case to be at the end of the DIV, next to the last article. So I need to scroll to see it I also tried with a float right, and with a position relative.

How can I have my button on the top right of my scrolled div ?

EDIT: When I have a scrolled Div, I dont want my button to be visible until I scrolled completely to the right.

Solution

Wrapping with a scrollable div instead of making the container scrollable will solve your problem. Example with your code :

  <div class="wrap">
   <div class="article"></div>
   <div class="article"></div>
   <div class="article"></div>
   <div class="article"></div>
   <div class="article"></div>
  <div/>

CSS:

.container {
  width: 100vw;
  background-color: red;
  position: relative;
  white-space: nowrap;
}
.wrap {
  overflow: auto;
}

Answered By - Zeyar Paing