flex-grow not working in internet explorer 11 [closed]

前端未结

关注

 5  1877

情书的邮戳

相关标签:

5条回答

一向

2021-02-07 00:53

Not really sure what you're trying to achieve but that's not how the Flexbox layouts work. To use the 'flex' property on an element it needs to be within a parent element which has the 'display:flex' property.

<style>
    #flexContainer {
        display: flex;
    }
    #item1 {
        width: 50px;
        background: #66CC33;
        flex: 1;
    }
    #item2 {
        width: 50px;
        background: #0099FF;
        flex: 5;
    }
    #item3 {
        width: 50px;
        background: #66CC33;
        flex: 10;
    }
</style>

<html>
    <div id="flexContainer">
        <div id="item1">1</div>
        <div id="item2">2</div>
        <div id="item3">3</div>
    </div>
</html>

0 讨论(0)

再見小時候

2021-02-07 00:57
In Case someone is trying this not on body but some child div. You can just set height: 0; on the element with the min-height.

IE just wants any height on the parent element of the flex-grow auto element.

So it could look like this:
```
.flex-parent{
  display: flex;
  min-height: 300px;
  height: 0;
}
.flex-child{
  flex: 1 1 auto;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
误落风尘

2021-02-07 01:01

IE requires flex: 1 1 auto

it doesn’t understand flex: 1

0 讨论(0)
发布评论:

提交评论
- 加载中...
慢半拍i

2021-02-07 01:02

I will use -ms-flex: 1 1 auto; Because IE has not full support for flex. Should be with prefix.

0 讨论(0)
发布评论:

提交评论
- 加载中...
野趣味

2021-02-07 01:14

This happens because you use the min-height on the <body> to get full height. For internet explorer, you need to use the height property (use 100% or 100vh).

0 讨论(0)
发布评论:

提交评论
- 加载中...

热议问题