IE11中的问题是要求flex-content-item占用与table相同的全宽度

问题描述 投票：0回答：1

IE11中的问题;我希望flex-content-item占用与滚动条相同的宽度。

我尝试使用一些flex概念，但没有奏效。

要了解flex-content-item的位置，我添加了一个红色边框。

现在这个边框可用到100％，我希望它能包裹整个桌子。这适用于Chrome，但不适用于IE11。

<!DOCTYPE html>
<html>
<head>
    <title> </title>
    <style type="text/css">
        .flex-parent{
            min-width: 0;
            max-width: none;
            display: flex;
            flex-flow: column wrap;
        }
        .flex-content-item{
            flex-direction: row;
            align-items: flex-start;
            justify-content: flex-start;
            display: flex;
            margin: 0px 0px 14.0px 0px;
            padding: 0px;
            min-height: 42.0px;
            min-width: 0;
            width: auto;
            border: 1px solid red;
        }

    </style>
</head>
<body>
<div class="flex-parent">
    <div class="flex-content-item">
        <table>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th> 
                <th>Age</th>
                <th>Lastname</th>
                <th>Lastname</th>
                <th>Lastname</th>
                <th>Lastname</th>
                <th>Lastname</th>
                <th>Lastname</th>
                <th>Lastname</th>
                <th>Lastname</th>
                <th>Lastname</th>
                <th>Lastname</th>
                <th>Lastname</th>
                <th>Lastname</th>
                <th>Lastname</th>
                <th>Lastname</th>
                <th>Lastname</th>
                <th>Lastname</th>
                <th>Lastname</th>
                <th>Lastname</th>
                <th>Lastname</th>
                <th>Lastname</th>
                <th>Firstname</th>
                <th>Firstname</th>
                <th>Firstname</th>
                <th>Firstname</th>
                <th>Firstname</th>
                <th>Firstname</th>
                <th>Firstname</th>
                <th>Firstname</th>
                <th>Firstname</th>
                <th>Firstname</th>
            </tr>
            <tr>
                <td>Jill</td>
                <td>Smith</td>
                <td>50</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
            </tr>
            <tr>
                <td>Eve</td>
                <td>Jackson</td>
                <td>94</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
            </tr>
            <tr>
                <td>John</td>
                <td>Doe</td>
                <td>80</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
                <td>Smith</td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>

我希望红色边框包裹整个表格。

javascript html internet-explorer-11 dom-events
1个回答
0
投票

对于flex-parent容器，尝试使用“display：inline-flex”，而不是使用“display：flex”，代码如下：

<style type="text/css">
    .flex-parent {
        min-width: 0;
        max-width: none;
        display: inline-flex;
        flex-flow: column wrap;
    }

    .flex-content-item {
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        display: flex;
        margin: 0px 0px 14.0px 0px;
        padding: 0px;
        min-height: 42.0px;
        min-width: 0;
        width: auto;
        border: 1px solid red;
    }
</style>

然后，在IE浏览器中的结果如下：

enter image description here

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.