我有一个
simple plunker here.
.container { display:flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; min-height: 4em; } .nav { flex: 0 0 4em; height: 1em; } .logo { flex: 1 0 auto; align-self: stretch; }@H_404_4@这是我在Chrome 49中想要的方式: @H_404_4@ @H_404_4@但不是在IE11中: @H_404_4@ @H_404_4@我已经检查过IE不处于兼容模式 – 它不是 – 它处于IE11模式. @H_404_4@这里发生了什么?
解决方法
这是IE11中的一个错误.
@H_404_4@IE11中的flex项目无法识别Flex容器上的min-height属性.
@H_404_4@如果切换到高度:4em,您将看到您的布局有效.
@H_404_4@一个简单的解决方法是使.container成为一个flex项.
@H_404_4@换句话说,将其添加到您的代码中:
body { display: flex; } .container { width: 100%; /* or flex: 1 */ }@H_404_4@无论出于何种原因,通过使Flex容器也成为弹性项目,子元素遵循最小高度规则. @H_404_4@更多细节:Flexbugs:
min-height
on a flex container won’t apply to its flex items