У меня есть элемент <ul> как гибкий контейнер с направлением строки.Каждый элемент <li> имеет меню внутри div, которое открывается вправо, когда происходит какое-то событие.
Проблема в том, что начиная с некоторого <li> и далее, меню выходит за правую сторону границ гибкого контейнера.
То, что я хочу, - это то, что меню будет знать, когда растягиватьвправо от его родителя <li> и когда растягиваться влево, в зависимости от того, достаточно ли свободного места все еще доступно справа.
Это скелет области проблемы:
<ul style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;">
<li ng-repeat="items-in-some-source">
<div>
<!-- some stuff -->
<div>
<!-- some other stuff -->
</div>
<div style="position:relative;" ng-include="some-menu-template.html"></div>
</div>
</li>
</ul>
Это ожидаемый результат с закрытым меню в верхней строке и некоторыми примерами с открытым меню в следующих строках.Обратите внимание, как ведет себя элемент <li id=D>, а также обратите внимание, что число элементов <li> является динамическим:
Это то, что происходит сейчас,обратите внимание, как <li id=D> переполняет гибкий контейнер:
Итак, есть ли способ добиться этого, используя только CSS?Я предпочитаю не использовать решение Javascript для этого.