Table-cell with fixed percentage doesn’t work with many items

I have three divs:

.container (display:table),

.left, .right (display:table-cell);

For .left I used 80%, the .right is 20%. In the left div I have many items with percentage width. If I add about 5 items everything work, I can resize the browser window, but when I have about 25 items the right side disappear.

I didn’t added the html, because it’s too long. Please check the result on JSFiddle. How can I solve this issue?

.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;
}

solution

If you change the table-layout property to fixed for the .container element, it resolves the issue:

Updated Example

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