Сделайте прокрутку переполнения после определенной точки останова CSS

Question

У меня есть следующий код, где у меня есть (переменное) количество кнопок в контейнере, положение кнопок корректируется в соответствии с шириной контейнера при изменении размера экрана, но чего я хочу добиться, так это в некоторой точке останова кнопки должны перестать перемещаться, и вместо этого дать контейнеру прокрутку overflow-y, и кнопки должны оставаться на своих местах.

.container {
  max-width: 800px;
  background-color: beige;
}

.btn {
  width: 80px;
}
.btn span{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

<div class="container">
  <button class="btn"><span>test</span></button>
  <button class="btn"><span>test123</span></button>
  <button class="btn"><span>test450354053</span></button>
  <button class="btn"><span>test23R02020202</span></button>
  <button class="btn"><span>test33030494</span></button>
  <button class="btn"><span>test403930390</span></button>
  <button class="btn"><span>test</span></button>
  <button class="btn"><span>test23423049</span></button>
  <button class="btn"><span>testé</span></button>
  <button class="btn"><span>test2340</span></button>
  <button class="btn"><span>test234234</span></button>
  <button class="btn"><span>test2342</span></button>
  <button class="btn"><span>test2342020</span></button>
  <button class="btn"><span>test2202349</span></button>
  <button class="btn"><span>testé</span></button>
  <button class="btn"><span>test234029</span></button>
  <button class="btn"><span>test20203030</span></button>
  <button class="btn"><span>test340</span></button>
  <button class="btn"><span>test234240</span></button>
  <button class="btn"><span>test2342340</span></button>
  <button class="btn"><span>test23420420</span></button>

</div>

Answer 1

В этом примере c a min-width с заданной точкой останова (например, 400px) и overflow: auto, установленной на .container, будет работать нормально

.container {
  max-width: 800px;
  min-width: 400px;
  overflow: auto;
  background-color: beige;
}

.btn {
  width: 80px;
}
.btn span{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

<div class="container">
  <button class="btn"><span>test</span></button>
  <button class="btn"><span>test123</span></button>
  <button class="btn"><span>test450354053</span></button>
  <button class="btn"><span>test23R02020202</span></button>
  <button class="btn"><span>test33030494</span></button>
  <button class="btn"><span>test403930390</span></button>
  <button class="btn"><span>test</span></button>
  <button class="btn"><span>test23423049</span></button>
  <button class="btn"><span>testé</span></button>
  <button class="btn"><span>test2340</span></button>
  <button class="btn"><span>test234234</span></button>
  <button class="btn"><span>test2342</span></button>
  <button class="btn"><span>test2342020</span></button>
  <button class="btn"><span>test2202349</span></button>
  <button class="btn"><span>testé</span></button>
  <button class="btn"><span>test234029</span></button>
  <button class="btn"><span>test20203030</span></button>
  <button class="btn"><span>test340</span></button>
  <button class="btn"><span>test234240</span></button>
  <button class="btn"><span>test2342340</span></button>
  <button class="btn"><span>test23420420</span></button>

</div>