我有一个
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;
- }
这是我在Chrome 49中想要的方式：
但不是在IE11中：
我已经检查过IE不处于兼容模式 – 它不是 – 它处于IE11模式.
这里发生了什么？
解决方法
这是IE11中的一个错误.
IE11中的flex项目无法识别Flex容器上的min-height属性.
如果切换到高度：4em,您将看到您的布局有效.
一个简单的解决方法是使.container成为一个flex项.
- body {
- display: flex;
- }
- .container {
- width: 100%; /* or flex: 1 */
- }
无论出于何种原因,通过使Flex容器也成为弹性项目,子元素遵循最小高度规则.
更多细节：Flexbugs: min-height on a flex container won’t apply to its flex items
