Проблема в IE11: элемент flex-content-item должен занимать всю ширину, как таблица - PullRequest
Новая
       30

Проблема в IE11: элемент flex-content-item должен занимать всю ширину, как таблица

0 голосов
/ 22 апреля 2019

Проблема в IE11;Я хочу, чтобы flex-content-item занимал ширину, аналогичную таблице с полосой прокрутки.

Я попытался использовать некоторую концепцию flex, но не сработало.

Чтобы понять, где находится flex-content-item Iдобавили красную рамку.

Теперь эта граница доступна до 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>

Я хочу, чтобы красная рамка обернула всю таблицу.

1 Ответ

0 голосов
/ 23 апреля 2019

Для контейнера 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

...