Why doesn’t the width of the parent block become equal to the child? How to achieve this?

Is it possible to achieve this without using JavaScript?

I tried using a display grid, but unfortunately it doesn’t work the way I want.
is there an explanation why this works this way?

how to make the width of the parent element equal to the child element

my css code

    .category {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: fit-content;
}

.category__title {
    text-transform: uppercase;
}

.wrapper-category-list,
.sub-wrapper-category-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: white;
    height: 100%;
}

.wrapper-category-list {
    padding: 0 10px 0 0;
    border-radius: 12px 0 0 12px;
}

.category-list,
.sub-category-list {
    cursor: pointer;
    display: flex;
    gap: 10px;
}

.sub-wrapper-category-list {
    display: none;
    padding: 0 20px 10px 20px;
}

.category-list:hover > .sub-wrapper-category-list,
.category-list.active > .sub-wrapper-category-list {
    display: flex;
    position: absolute;
    left: 100%;
    z-index: 1;
    border-radius: 0 12px 12px 0;
    height: fit-content;
    top: 0;
    min-height: fit-content;
}

.wrapper-category {
    position: relative;
}

body {
    background-color: black;
}

my html (vue)

        <div class="wrapper-category">
        <ul class="wrapper-category-list">
            <li class="category-list" v-for='category in categoriesStore.results' :key="category.name">
                <span>
                {{ category.name }}
                </span>
                <span>
                    {{ category.amount }}
                </span>
                <ul class="sub-wrapper-category-list">
                    <li class="sub-category-list" v-for="sub_category in category.children" :key="sub_category.name">
                        <span>
                            {{ sub_category.name }}
                        </span>
                        <span>
                            {{ sub_category.amount }}
                        </span>
                    </li>
                </ul>
            </li>
        </ul>
    </div>