Html 使div充当框架

我有以下HTML组

<div id="item-groups">
<!-- Section to select product types -->

<div class="item-group-button">
<!-- Item Group Selection Button -->
<h3>Beverage</h3>
</div>
<div class="item-group-button">
<!-- Item Group Selection Button -->
<h3>Tobacco</h3>
</div>
</div>

如何设计CSS，使项目组div可以作为一个框架。稍微解释一下，项目组Buton是从DB加载的，元素的数量取决于DB记录的数量。当元素超过某个限制时，多余的元素就会出现故障。我怎样才能阻止这一切？我使用了一种方法，使其他元素的位置绝对，然后所需的元素可以作为一个框架。但就我而言，这是不可能的

我试图删除itemgroups元素的宽度限制，但没有用

更新：

正如您所看到的，第一个图像显示正确，但第二个图像显示，随着按钮的增多，其他元素的顺序也发生了变化。我怎样才能解决这个问题。我希望按钮停留在一行而不是第二行

---

当使用html框架，当有更多的元素显示，将有一个滚动条！如何在Div中使用该功能。

这是一个简单的CSS技巧，可以通过使用以下代码来实现

对于父元素：

#item-groups{
height: 80px;
width: inherit;
overflow-x: scroll; <-- Make the scrolling horizontal
white-space: nowrap; <-- Handle the white space in the element 
}

.item-group-button{
width: 130px;
height: 40px;
margin: 17px 0px 0px 20px;
border-radius: 10px;
background: #4e5154;
    display: inline-block; <-- this will display the excess elements in a line
}

#项目组{
高度：80px；
宽度：继承；
overflow-x:scroll；要获得滚动条，您可以在容器上使用
overflow-x:scroll；
，它允许容器中的元素扩展到其边界之外，并在发生这种情况时创建滚动条

我想指出的是，对于菜单来说，这可能不是最好的选择。滚动条无法很好地配合设计。我看到两种选择：

如果容器无法容纳按钮，请重新调整按钮的大小。基本上，您将定义
最大宽度：
属性，并给它们一个百分比
宽度：
，这样所有按钮在出现溢出之前都会看起来正常。显然，这可能是标签问题。您可能需要在标签上执行
溢出-x:hidden；
文本使其看起来正确。或者尝试

创建您自己的滚动。如果您对一点JavaScript感到满意，您可以在容器上使用
overflow-x:hidden；
和
position:relative；
，然后使用“滑块”里面有按钮，并且有
position:absolute；
。然后，在容器的两端有悬停按钮，这将触发JS调整滑块的位置，从而滚动。这只在启用JS的情况下起作用，不过在这种情况下，您可以简单地返回到
overflow-x:scroll；
方法。这里的优点是，一切看起来都很漂亮和统一

我通常会尝试不强制使用滚动条，因为每个操作系统/浏览器都可以呈现非常不同的滚动条。现在您可以设置滚动条的样式，因为CSS3提供了许多伪元素来处理滚动条。不幸的是，浏览器支持很粗略，需要特定于浏览器的代码，这意味着它不是一个很好的选项。
什么你的意思是“作为一个框架”吗？我认为很多按钮都没有问题：你说的“无序”是什么意思？我更新了问题！你是否尝试过溢出：滚动；在该div（项目组）上？这可能不是引用你的问题，但你需要在浮动元素之后清除该div，否则它会扰乱你的页面流。
.item-group-button{
width: 130px;
height: 40px;
margin: 17px 0px 0px 20px;
border-radius: 10px;
background: #4e5154;
    display: inline-block; <-- this will display the excess elements in a line
}