滚动Div内按钮无法随文本自适应宽度且文本溢出的解决方法

安全阿岳

2026-8-2

解决滚动容器内按钮自适应文本宽度且不溢出的问题

问题核心在于：当父容器开启横向滚动后，flex布局默认会压缩子元素宽度，导致按钮只能维持最小宽度，文本溢出。通过以下CSS调整即可解决：

修改要点

给按钮添加flex-shrink: 0，禁止flex容器压缩按钮宽度
优化父容器的滚动设置，隐藏不必要的纵向滚动条
确保按钮内文本不换行，保证宽度自适应

修改后的完整代码

HTML（无需改动）

<div className="div1">
  {groups.map((group, index) => {          
                return (
                  <div
                    key={index}
                    className="groups-button"
                    onClick={() => {        
                    }}
                  >
                    <p>{group.name}</p>
                  </div>
                );
              })}
</div>

CSS

.div1{
  height: 11.29629%;
  display: flex;
  flex-direction: row;
  margin-left: 1.8125em;
  overflow-x: auto; /* 仅在内容超出时显示横向滚动条 */
  overflow-y: hidden; /* 隐藏纵向滚动条 */
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 隐藏WebKit内核浏览器的滚动条 */
.div1::-webkit-scrollbar {
  display: none;
}

.groups-button{
  min-width: 8.242052082em;
  flex-shrink: 0; /* 关键：禁止按钮被压缩 */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  white-space: nowrap; /* 文本不换行，保证宽度适配 */
}
.groups-button p{
  margin: 0px;
  text-align: center;
  font: normal normal 600 1.38417em/1.1em Titillium Web;
  letter-spacing: 0.13px;
  color: #000000;
  opacity: 1;
}