css - flex 容器中的 ui.bootstrap 下拉指令

Question

我将使用 flexbox 来布局框架，但是我发现如果我将 dropdown 指令放入 flex 容器中，它将不再起作用，这里是 example ,

有两个选项可以让它再次工作，

1. 删除宽度:100%；高度:100% 来自 html, body
2. 或从唯一的 div 中删除 display: flex。

我知道作为 flexbox 容器的 child ，它们都被视为 flex-item，我试图将显示覆盖为 inline 和 block，两者都不起作用。

那么，有没有办法让它跑起来呢？如果不能，为什么？

谢谢。

Answer 1

只需从包裹整个下拉组件组的 drop div 中删除任何 flex 属性...

<div class="btn-group" dropdown  layout="row" layout-align="center center">
//..drop down compoents
</div>

保留布局属性似乎没问题(如果您完全使用布局属性 - angular-material)，但删除任何 flex 属性将允许下拉菜单再次正确排列，而无需添加任何 css。