How to set width of element to its absolute nested element? - html

Question

I want the main div, .secondNavLinksInSmall, to be of width as of the .secondNavLinksDisplayInSmall element. How can I do it? Note that the last is an element with position: absolute. Also, I wish to do it without setting any fixed width to the code.
Here is the 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>
Here is the SCSS code:
.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

The short answer is no, it can't be done using only CSS. If you want a parent element to inherit the dimensions of a child element that is position absolutely the only solution is using javascript.