CSS 'gap' property doesn't work for fixed size flexbox with flex wrap enabled

Question

This is my code:

#container {
    position: absolute;
    display: flex;
    width: calc(100% - 20px);
    height: calc(100% - 60px);
    left: 10px;
    top: 10px;
    gap: 10px;
    flex-direction: row;
    flex-wrap: wrap;
}

#container>div {
    position: relative;
    display: block;
    width: 80px;
    height: 80px;
    flex: 0 0 80px;
    cursor: pointer;
    background: #808080;
}

Here's a screenshot from my browser: Screenshot

I expected to get the same gap for both horizontal and vertical direction, but it completely ignores my property set in CSS and shows much more space in vertical direction.

I've also tried to set column-gap and row-gap separately, but it doesn't change anything. With flex-wrap disabled, the gap works as I expected.

Edit: Remove position: absolute; should work but it is not a good solution for me as it can no longer be placed on top of another element.