Блог

У меня есть список стран, который отображается как абсолютный элемент внутри относительного элемента.

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 иметь автоматическую ширину, основанную на ширине названий стран, не ограниченную шириной родительского элемента?

Вы пытались добавить в screener-filter-dropdown класс width:fit-content или width:max-content ?

Попробуйте

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