CSS：如何消除滚动条左侧缝隙以防止背景透过显示

嘿，这个问题我之前也碰到过！根源其实很简单——你的.button设置了min-width: 200px，但外层容器.menu的min-width只有195px，按钮宽度超出了容器，导致内容溢出后，滚动条和按钮之间就露出了容器外的绿色背景。下面给你两个实用的解决方案：

方案一：让容器宽度适配按钮 #

直接把容器的最小宽度调整到和按钮一致，同时加上box-sizing: border-box确保边框不会额外占用宽度，避免容器实际可用宽度变小：

.menu { 
  min-width: 200px; /* 和按钮min-width保持一致 */
  max-height: 200px; 
  overflow: auto; 
  position: fixed; 
  background-color: #F9F9F9; 
  border: solid 1pt yellow;
  box-sizing: border-box; /* 边框包含在宽度内，避免宽度计算偏差 */
}
.button { 
  border: solid 1px white; 
  min-width: 200px; 
}
body { background-color: green; }

方案二：让按钮宽度适配容器 #

如果不需要按钮固定200px宽度，直接让按钮填满容器，这样就不会出现溢出问题：

.menu { 
  min-width: 195px; 
  max-height: 200px; 
  overflow: auto; 
  position: fixed; 
  background-color: #F9F9F9; 
  border: solid 1pt yellow;
  box-sizing: border-box;
}
.button { 
  border: solid 1px white; 
  width: 100%; /* 按钮宽度填满容器 */
  box-sizing: border-box; /* 避免边框超出容器 */
}
body { background-color: green; }

两种方案都能解决缝隙问题，你可以根据自己的布局需求选择~

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