How to make flexbox display like a game inventory

Question

My goal is like this:

Rules:

• the horizontal gap between items is fixed, called x
• the vertical gap between items is fixed, called y
• the gap between borders of the leftmost item and the flexbox is the same as that between the rightmost item and the flexbox, called z
• x, y, z are set individually. They may be different.
• List items from left to right, and then top to bottom
• keep the bottom padding >= the top padding. If exceeded, hide the overflow part and make it scrollable (not system scrollbar).

I tried some ways, and this is my current code

content #ItemPane {
    height:100%;
    background:#a0d4e5;
    padding:1vh;
    border:1px solid blue;
}

    content #ItemPane .PanelContentWrapper {
        width:100%;
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
    }

        content #ItemPane .Slot {
            width:6vh;
            height:6vh;
            margin:1vh;
            background:black;
        }

and as a result:

https://jsfiddle.net/h4ww9erj/

The biggest problem is that I can't make the left and right padding the same while the items are listed left-aligned.

My solutions/workarounds:

• Dynamically set the gap between items in js
• Table for this layout

Any better ideas?

As for scroll and bottom padding issue, the only way I think of is that I must have a middle wrapper as I already I wrote, and customize my own scroll system (e.g. capture the mouse/touch offset and convert it to scroll offset and move the wrapper to the corresponding position).

Any other advises?