在某个断点 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

在这个特定的例子中，min-width带有给定断点（例如400px）并overflow: auto设置在.container将工作正常.container {&nbsp; max-width: 800px;&nbsp; min-width: 400px;&nbsp; overflow: auto;&nbsp; background-color: beige;}.btn {&nbsp; width: 80px;}.btn span{&nbsp; white-space: nowrap;&nbsp; overflow: hidden;&nbsp; text-overflow: ellipsis;&nbsp; display: block;}<div class="container">&nbsp; <button class="btn"><span>test</span></button>&nbsp; <button class="btn"><span>test123</span></button>&nbsp; <button class="btn"><span>test450354053</span></button>&nbsp; <button class="btn"><span>test23R02020202</span></button>&nbsp; <button class="btn"><span>test33030494</span></button>&nbsp; <button class="btn"><span>test403930390</span></button>&nbsp; <button class="btn"><span>test</span></button>&nbsp; <button class="btn"><span>test23423049</span></button>&nbsp; <button class="btn"><span>testé</span></button>&nbsp; <button class="btn"><span>test2340</span></button>&nbsp; <button class="btn"><span>test234234</span></button>&nbsp; <button class="btn"><span>test2342</span></button>&nbsp; <button class="btn"><span>test2342020</span></button>&nbsp; <button class="btn"><span>test2202349</span></button>&nbsp; <button class="btn"><span>testé</span></button>&nbsp; <button class="btn"><span>test234029</span></button>&nbsp; <button class="btn"><span>test20203030</span></button>&nbsp; <button class="btn"><span>test340</span></button>&nbsp; <button class="btn"><span>test234240</span></button>&nbsp; <button class="btn"><span>test2342340</span></button>&nbsp; <button class="btn"><span>test23420420</span></button></div>