Выпадающее меню не помещается в контейнер при открытии ⇐ Html

[Anonymous]

У меня есть следующий HTML-код:

Код: Выделить всё

nav {
width: 100px;
}

.nav-menu {
background-color: orange;
}

.dropdown {
position: relative;
}

a[data-toggle="dropdown"] {
display: flex;
align-items: center;
background: transparent;
color: blue;
padding: 10px 15px;
border-radius: 4px;
transition: background 0.3s ease;
white-space: nowrap;
}

a[data-toggle="dropdown"]:hover {
color: black;
}

.nav-menu {
display: flex;
flex-wrap: wrap;
gap: 10px;
list-style-type: none;
padding: 0;
margin: 0;
align-items: center;
width: 100%;

}

.dropdown-menu {
list-style: none;
padding: 10px 15px;
margin: 0;
position: absolute;
top: 100%;
left: 0;
min-width: 200px;
background: #ffffff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
border-radius: 6px;
overflow: hidden;
transform: scaleY(0);
transform-origin: top;
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
z-index: 1000;
}

.dropdown-menu.show {
transform: scaleY(1);
opacity: 1;
}

.dropdown-menu:before {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
clip-path: inset(0 0 0 0);
}

Код: Выделить всё

[list]

[*]
[url=#]About[/url]

[url=/foo.html]Foo[/url]
[*][url=/bar.html]Bar[/url]
[*][url=/bar.html]Some long text here[/url]
[/list]

Но я хочу, чтобы меню отображалось не шире, чем размеры контейнер (оранжевого цвета). Меню всегда должно помещаться в контейнер.


https://jsfiddle.net/Suliman123/8tg67sq4/
Если меню длиннее текстового меню контейнера, его текст должен отображаться полностью. В моем случае пунктов меню много. А если нет места справа, всегда есть место слева.
Вот иллюстрация: https://jsfiddle.net/Suliman123/Lno7a5p0/
меню здесь не должно быть больше чем черный регион.

Подробнее здесь: https://stackoverflow.com/questions/793 ... hen-opened