.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;
}
这正是我想要在Chrome 49中实现的方式:
但不是在IE11中:
我已经检查过IE不处于兼容模式 - 它不是 - 它处于IE11模式。
这里发生了什么?
答案 0 :(得分:16)
这是IE11中的一个错误。
IE11中的弹性项目无法识别弹性容器上的min-height
属性。
如果切换到height: 4em
,您会看到您的布局有效。
一个简单的解决方法是使.container
成为弹性项目。
换句话说,将其添加到您的代码中:
body {
display: flex;
}
.container {
width: 100%; /* or flex: 1 */
}
无论出于何种原因,通过使您的Flex容器也成为弹性项目,子元素将尊重min-height
规则。
此处有更多详情:Flexbugs: min-height
on a flex container won't apply to its flex items