поле прокрутки переполнения с фиксированными кнопками внутри

Question

У меня переполнение: прокрутка; окно с длинным содержимым и 2 кнопками вот так.

Проблема в том, что кнопки не расположены в конце поля прокрутки смотрите здесь

Я даже сделал скрипку: https://jsfiddle.net/bananoga/70vy13ke/12/

это мой css:

.scroll-div{
  border: 1px solid black;
  width:100%;
  height: 110px;
  overflow: scroll;
  contain: content;
  display: flex;
}

.inside-box{
    border: 1px solid black;
    width: 100px;
    min-width: 100px;
    height: 50px;
    margin: 10px;
}

.buttons{
   position: fixed; 
    left: auto;
    right: 19px;
    bottom: 5px;
    margin-top:5px;
}

Большое спасибо:)

Answer 1

Установив position: fixed на .buttons, вы удалили его из обычного потока документа и вместо этого разместили его относительно ближайшего родительского контекста. Поскольку у вас было contain: content на .scroll-div, это был ваш ближайший контекст, а .buttons было установлено фиксированное расстояние от его границ. Обратите внимание, что это не то же самое, что границы содержимого .scroll-div, но его внешний контейнер.

При удалении position: fixed и связанных с ним стилей кнопки отображаются справа от последнего экземпляра .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>

---

Редактировать

На основании разъяснений в вашем комментарии:

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>