我有一个<ul>
元素作为具有行方向的flex容器。每个<li>
元素都有一个包含在div中的菜单,该菜单在发生某些事件时向右打开。
问题是,菜单从<li>
开始一直流到flex容器边界的右侧。
我想要的是,菜单将知道何时从其上级<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>
如何使flex容器溢出:
那么,有什么方法可以仅使用CSS来实现?我不想为此使用Javascript解决方案。