flex-grow 在IE11下的兼容性问题

来源:4-10 flex-grow扩展比例

人生的起源

2022-03-21

老师,在IE11下,父元素设置flex-direction: column,且只设置了min-height属性,没有设置height属性,子元素的flex-grow: 1不会生效,这个要怎么解决?

写回答

1回答

西门老舅

2022-03-21

可以再包一层flex。

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <style>

    #app{

      display: flex;

    }

    #div1{

      min-height: 500px;

      width: 200px;

      display: flex;

      flex-direction: column;

    }

    #div2{

      flex-grow: 1;

      background: red;

    }

  </style>

</head>

<body>

  <div id="app">

    <div id="div1">

        <div id="div2"></div>

    </div>

  </div>

</body>

</html>


0
1
人生的起源
真的可以,谢谢老师
2022-03-22
共1条回复

前端内功修炼 5大主流布局系统进阶

前端内功修炼:5大主流布局系统进阶

758 学习 · 231 问题

查看课程