Как узнать полную ширину контейнера, если он не помещается в родителя?

Question

[romaro]

HTML:

<div class="_scrollContainer">
        <div class="_itemsWrapper">
            <li class="__item js-item"><a href="">{{ MainMenuBlock.dict.catalogTitle }}</a></li>
            <li class="__item js-item"><a href="">{{ MainMenuBlock.dict.goodsTitle }}</a></li>
            ...
            </li>
        </div>
</div>

CSS:

._scrollContainer {
      width: 400px;
    }
    ._itemsWrapper {
        display: flex;
        justify-content: flex-start;
        column-gap: 30px;
        @include fw.screen(phone) {
            column-gap: 20px;
        }
        overflow-x: clip;
    }

Общая ширина пунктов меню превышает 400px (как и ширину страницы).

Думал собрать все дочерние элементы (пункты меню) и сложить для них offsetWidth, но он не учитывает отступы. Может быть есть способ проще?

Answer 1

[Антон Горецкий]

Через getComputedStyle получаете все вычисленные свойства элемента и вытаскиваете нужное. Примеры там есть.