Html 固定百分比的表格单元格不'；我不能处理很多项目

我有三个部门：

.container

（

显示：表格

）

.left

，

right

（

显示：表格单元格

）

对于

.left

我使用了80%，而

.right

使用了20%。在左分区中，我有许多具有百分比宽度的项目。如果我添加大约5个项目，一切正常，我可以调整浏览器窗口的大小，但当我有大约25个项目时，右侧消失

我没有添加html，因为它太长了。请在上查看结果。我如何解决这个问题

.container {
    border: 1px solid gray;
    display: table;
    width: 100%;
}

.left {
    display: table-cell;
    width: 80%;
    background: yellow;
}

.right {
    display: table-cell;
    width: 20%;
    background: red;
}

.items {
    width: 40%;
    height: 100px;
    background: blue;
    display: inline-block;
    margin-right: 15px;
}

.scroll {
    width: 100%;
    overflow-x: scroll;
    white-space: nowrap;
}

如果将

.container

元素更改为

fixed

，它将解决以下问题：

.container {
  border: 1px solid gray;
  display: table;
  table-layout: fixed;
  width: 100%;
}