Question

HY

我在IE浏览器中遇到一些问题：

http://jsfiddle.net/EvvBH/

请注意#two元素有flex: auto，即使内容不够，也应该将其展开以填充容器。

但它只在Chrome和Firefox中实现。在IE中，它根本不起作用。

IE不支持

{1}}

Answer 1

万一有人试图这个不是在身体而是一些孩子div。你可以设置高度：0;在具有最小高度的元素上。

IE只想在flex-grow auto元素的父元素上获得任何高度。

所以看起来像这样：

    <webview id="wv1" src="https://www.github.com/" style="display:inline-flex; width:100%; height:140px" nodeintegration></webview>



    <script>
    var webview = document.getElementById('wv1');
    webview.addEventListener('dom-ready', function() {
    webview.insertCSS('html,body{ background-color: #FF0000 !important;}')
    });

    </script>

Answer 2

IE要求flex: 1 1 auto

它不了解flex: 1

Answer 3

这是因为您使用min-height上的<body>来获得全高。对于Internet Explorer，您需要使用height属性（使用100%或100vh）。

Answer 4

我将使用-ms-flex: 1 1 auto; 因为IE尚未完全支持flex。应该带有前缀。

Answer 5

不确定您尝试实现的目标，但不是Flexbox布局的工作方式。使用＆＃39; flex＆＃39;元素上的属性需要在父元素中，该元素具有＆＃39; display：flex＆＃39;属性。

<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>

flex-grow在Internet Explorer 11中无法正常工作

5 个答案: