Html 根据按钮行宽度调整div宽度

我在一个div中有一些按钮，它们很多，向下形成新行，所以我在该div中做了一个垂直滚动，以访问所有这些按钮

问题是垂直滚动条不在按钮旁边，这正是我所需要的，但这很困难，因为一行按钮的宽度总是随着屏幕的宽度而变化

在snipet中，如果您更改屏幕宽度，您可以看到按钮和滚动之间的巨大可变空间，我已将颜色添加到主div以更好地区分：

正文{
溢出y：隐藏；
}
#哨兵{
高度：55px；
溢出y：自动；
}
#sli{
宽度：自动；
背景色：#EEAAEE；
}
奥特拉迪夫先生{
高度：50px；
背景颜色：橙色；
}
钮扣{
宽度：50px；
高度：23px；
}

你好

div#sentlist上有多余的填充，它在div#sli和滚动条之间创建了空间。您需要删除div#sentlist中的填充

---

此外，在css文件中使用类而不是id通常是最佳做法。

您可以使用flex

 #sli .flex-container {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    justify-content: space-around;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
}

.flex容器{
显示器：flex；
显示：-webkit flex；
显示：-moz flex；
证明内容：周围的空间；
-webkit内容：周围的空间；
-moz调整内容：周围的空间；
柔性流：行换行；
-webkit flex流：行换行；
-moz-flex-flow：行换行；
}
.flex容器.项目{
宽度：50px；
高度：23px；
背景：红色；
利润率：0px 1.1%8px；
}
.柔性假人{
高度：0！重要；
填充顶部：0！重要；
填充底部：0！重要；
页边距顶部：0！重要；
页边距底部：0！重要；
}
.flex容器.item>按钮{
宽度：100%；
身高：100%；
}
奥特拉迪夫先生{
高度：50px；
背景颜色：橙色；
}
#哨兵{
高度：55px；
溢出y：自动；
}
#sli{
宽度：自动；
背景色：#EEAAEE；
}

不错的解决方案，但最后一行仍然存在问题。如果增加屏幕宽度，最后一个居中的按钮看起来不合适。有什么解决办法吗？你想用“调整内容：柔性端”吗？这在按钮的边缘留出了一个空间这就是我想要的，太多了！

 #sli .flex-container {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    justify-content: space-around;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
}