Как понять какой по счету элемент flexbox был перенес на следующую строку?

Question

Есть следующий UI компонент.

Функционал должен быть следующим: При переносе на новую строку элемента, у предыдущего элемента нужно убирать правую границу. А т.е. в случае как на скриншоте выше, правильное поведение будет выглядеть так:

Здесь разделителя нет. Я использую next js, это важно знать так как вероятно решение будет связано именно с JS а не встроенным функционалом css и html.

Предполагал, что можно проверять высоту первого элемента и сравнивать ее с последующими, по такому принципу находить нужный элемент и убирать границу, однако способ слишком "костыльный".

Answer 1

Можно обойтись чистым CSS.

        .container {
            display: flex;
            flex-wrap: wrap;
            border: solid 0.5px grey;
            width: 300px;
            overflow: hidden;
        }
        .item {
            margin-left: 20px;
            position: relative;
            left: -20px;
        }
        .item:before {
            content: '|';
            position: absolute;
            left: -10px;
        }

    <div class="container">
        <div class="item">qwerty uiop</div>
        <div class="item">asdfgh jkl</div>
        <div class="item">zxcv bn m</div>
        <div class="item">1234 567 890</div>
    </div>

БЛОГ НА HUSL

Как понять какой по счету элемент flexbox был перенес на следующую строку?

Ответы (1 шт):