Html 如何将元素的宽度设置为其绝对嵌套元素？

我希望主div

.secondNavLinksInSmall

，与

.secondNavLinksDisplayInSmall

元素一样宽。我怎么做？请注意，最后一个元素的位置为：绝对。此外，我希望在不设置代码任何固定宽度的情况下执行此操作

以下是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>

---

简单的回答是不，它不能只用CSS来完成。如果希望父元素继承子元素的维度，那么唯一的解决方案就是使用javascript

.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');
    }
}