允许绝对元素的自动宽度大于父元素的宽度

Question

我有一个国家列表，显示为相对元素中的绝对元素。

HTML是：

<div class="screener-filter">
    <div class="screener-filter-dropdown">
        <div class="dropdown-item">Afghanistan</div>
        <div class="dropdown-item">Albania</div>
        ...
    </div>
</div>

CSS为：

.screener-filter {
    position: relative;
    display: inline-block;
}
.screener-filter-dropdown {
    position: absolute;
    left: 0;
    top: 110%;
}

问题是.screener-filter-dropdown自动适合父级的宽度，因此某些国家/地区的名称不能排成一行。以美属萨摩亚为例：

我的问题是，如何允许.screener-filter-dropdown具有基于国名的宽度的自动宽度，而不受父级宽度的限制？

Answer 1

您是否尝试过添加到screener-filter-dropdown类width:fit-content或width:max-content上？

Answer 2

尝试

.screener-filter {
    position: relative;
    display: inline-block;
    width: 100%; // <=
}