Box-decoration-break не клонируется должным образом, всегда ломается

Question

Я пытаюсь использовать box-decoration-break: clone; в сетке, которая реплицируется в столбцах div, но свойства не реплицируются в каждом поле при рендеринге полей, я имею в виду, что граница и отступы не идеально подходит для каждой коробки, и я не вижу, что не так с моим кодом, поэтому я отправлю свой код и пример на codepen , чтобы вы посмотрели и поняли, что я имею в виду.

Я использую Edge и Chrome, и они визуализируют один и тот же стиль, который всегда является некорректным

.columns {
    column-width: 250px;
    max-width: 1000px;
    margin: 0 auto;
}

.grid {
    display: grid;
    grid-template-columns: minmax(50px, 100px) 1fr;
    grid-auto-rows: 50px;
    grid-gap: .5rem;
    align-items: center;
    background: #eee;
    padding: 1em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    -o-box-decoration-break: clone;
    border-radius: 4px;
    border: 2px solid red;
}

.wrapper {
    counter-reset: nb;
}

input {
    align-self: stretch;
    border-radius: 2px;
    border: 1px solid #ccc;
}

label::before {
    counter-increment: nb;
    content: counter(nb) ". ";
}