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

Question

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

Answer 1

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