Как установить ширину элемента в его абсолютный вложенный элемент?

Question

Я хочу, чтобы основной div, .secondNavLinksInSmall, имел ширину элемента .secondNavLinksDisplayInSmall. Как мне это сделать? Обратите внимание, что последний является элементом с position: absolute. Кроме того, я могу sh сделать это без установки фиксированной ширины для кода.

Вот HTML:

<div class="secondNavLinksInSmall">
    <button id="secondNavLinksButtonInSmall" class="secondNavLinksButtonInSmall" type="button">
        <svg id="secondNavLinksButtonInSmallSVG" class="secondNavLinksButtonInSmall__svg" viewBox="0 0 213.333 213.333">
            <polygon points="0,53.333 106.667,160 213.333,53.333"/>
        </svg>
        <span><?php echo $buttonTextInsmall; ?></span>
    </button>
    <div id="secondNavLinksDisplayInSmall" class="secondNavLinksDisplayInSmall">
        <a class="secondNavLinkInSmall" href="/">דילים חדשים</a>
        <a class="secondNavLinkInSmall" href="hotdeals.php">דילים חמים</a>
        <a class="secondNavLinkInSmall" href="forum.php">פורום</a>
    </div>
</div>

Вот код S CSS:

.secondNavLinksInSmall {
    margin-right: 10px;
    position: relative;
    height: 100%;
    display: none;
    background-color: transparent;
}

.secondNavLinksButtonInSmall {
    cursor: pointer;
    height: 100%;
    width: 100%;
    padding: 0 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    color: white;
    font-size: 20px;
    text-align: center;
    white-space: nowrap;

    &:hover {
        background-color: map-get($webColors, 'main-dark');
    }

    &__svg {
        height: 12px;
        fill: white;
        margin-left: 10px;
        transition: transform .4s;
    }
}

.secondNavLinksDisplayInSmall {
    background-color: white;
    z-index: 2;
    display: none;
    flex-direction: column;
    position: absolute;
    top: 48px;
    left: 0;
    width: min-content;
    border: 1px solid black;
}

.secondNavLinkInSmall {
    border-bottom: 1px solid map-get($webColors, 'main-dark');
    white-space: nowrap;
    text-align: center;
    font-size: 20px;
    text-decoration: none;
    color: black;
    padding: 5px;

    &:last-child {
        border-bottom: none;
    }

    &:hover {
        background-color: map-get($webColors, 'dark-white');
    }
}

Answer 1

Короткий ответ - нет, это нельзя сделать, используя только CSS. Если вы хотите, чтобы родительский элемент наследовал размеры дочернего элемента, который является позиционным, то единственным решением является использование javascript.