Question

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

我要用红色边框包裹整个桌子。

Answer 1

对于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浏览器中的结果如下：

IE11中的问题希望flex-content-item占用与表相同的全宽度

1 个答案: