The utilization of position: fixed on .buttons caused it to be removed from the regular flow of the document and positioned relative to the closest parent context. In this case, with contain: content applied to .scroll-div, it became the nearest context, thus positioning .buttons a fixed distance away from its boundaries. It's important to note that these boundaries refer to the outer container of .scroll-div, not its inner content.
When removing position: fixed along with associated styles, the buttons will display to the right of the last occurrence of .filter:
.scroll-div {
border: 1px solid black;
width: 100%;
height: 110px;
overflow: scroll;
display: flex;
}
.filter {
border: 1px solid black;
width: 100px;
min-width: 100px;
height: 50px;
margin: 10px;
}
.buttons {
margin-top: 5px;
}
<div class="scroll-div">
<div class="filter"></div>
<div class="filter"></div>
<div class="filter"></div>
<div class="filter"></div>
<div class="filter"></div>
<div class="filter"></div>
<div class="filter"></div>
<div class="filter"></div>
<div class="filter"></div>
<div class="filter"></div>
<div class="buttons">
<button class="btn1">
button1
</button>
<button class="btn2">
button2
</button>
</div>
</div>
Edit
Considering the clarification provided in your comment:
body {
margin: 0;
}
.container {
max-width: 100%;
overflow-x: auto;
display: flex;
padding: 20px;
align-items: start;
}
.filter {
border: 1px solid #333;
padding: 20px;
margin-right: 20px;
min-width: 100px;
}
.filter:last-child {
margin-right: 0;
}
.buttons {
display: flex;
margin-top: 10px;
}
<div class="container">
<div class="filter">Filter Content</div>
<div class="filter">Filter Content</div>
<div class="filter">Filter Content</div>
<div class="filter">Filter Content</div>
<div class="filter">Filter Content</div>
<!--
This div will wrap both the last filter and
the buttons below it to allow for the desired
layout to be achieved without brittle hacks.
-->
<div>
<div class="filter">
Filter Content
</div>
<div class="buttons">
<button>Button 1</button>
<button>Button 2</button>
</div>
</div>
</div>