如何阻止按钮换行溢出，实现横向滚动效果？

要让按钮区域横向滚动而非垂直溢出，同时保留按钮25%的宽度，可按以下方式修改代码：

核心改动说明 #

• 按钮容器启用Flex布局，强制内部元素不换行：添加display: flex、flex-wrap: nowrap
• 开启容器的横向滚动：设置overflow-x: auto，同时关闭垂直溢出overflow-y: hidden
• 移除按钮的float: left，Flex布局下浮动属性无效
• 可选：添加align-items: center让按钮在容器内垂直居中，优化视觉体验

完整代码 #

CSS #

* {
  box-sizing: border-box;
}

#button-contianer {
  position: fixed;
  padding: 8px;
  bottom: 0;
  left: 8px;
  width: calc(100% - 16px);
  height: 72px;
  background-color: rgb(125, 205, 231);
  border: 3px solid rgb(18, 171, 222);
  border-radius: 10px;
  font-size: 20pt;
  /* 新增Flex布局相关属性 */
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  align-items: center;
}

button {
  width: calc(25% - 8px);
  height: 50px;
  padding: 0;
  background: none;
  border: 2px solid black;
  margin: 0 4px;
  /* 移除无效的浮动属性 */
  /* float: left; */
}

/* 可选：自定义滚动条样式，提升美观度 */
#button-contianer::-webkit-scrollbar {
  height: 8px;
}

#button-contianer::-webkit-scrollbar-thumb {
  background-color: rgb(18, 171, 222);
  border-radius: 4px;
}

HTML #

<div id="button-contianer">
  <button>2022.01.09</button>
  <button>2022.01.24</button>
  <button>2022.02.05</button>
  <button>2022.02.12</button>
  <button>Should overflow</button>
</div>

为什么原有方法无效 #

之前使用float: left会让按钮在容器宽度不足时自动换行，导致垂直溢出；单纯添加overflow-x无法生效，因为没有阻止元素换行的机制。Flex布局的flex-wrap: nowrap会强制所有按钮在同一行排列，超出部分触发横向滚动，完美解决你的需求。

内容的提问来源于stack exchange，提问作者FeenixFobia