IE Flexbox не учитывает размер дочернего flexbox

У нас есть родительский флексбокс с flex-basis: auto; Внутри последнего родительского контейнера у нас есть некоторое количество флексбоксов с flex-basis: 0; Проблема в том, что последний родительский контейнер ведет себя так, как будто он пустой. Это происходит только в IE(11).

Пожалуйста, поделитесь каким-нибудь хаком, чтобы исправить это.

Скрипач: https://fiddle.sencha.com/#view/editor&fiddle/2slv

Вот пример текста:

-div:flex-basis=auto
-div:flex-basis=auto
-div:flex-basis=auto
    --div:flex-basis=0

IE11 не учитывает ширину содержимого div второго уровня при расчете ширины div верхнего уровня.

.container {
        display: flex;
        background: #cccccc;
        width: 50%;
    }

    .container > * {
        flex: 1 1 auto;
    }

    .first {
        background: #00ffff;
    }

    .last {
        background: #ff00ff;
        display: flex;
    }

    .btn {
        flex: 1 1 0%;
        display: flex;
        height: 30px;
    }

    .btn-inner {
        flex: 1 1 0px;
        background: rgba(0,0,0,0.2);
        display: flex;
    }


    .inner-inner {
        flex: 1 1 auto;
    }

<div class = "container">
    <div class = "first">
        <input type = "text" \>
    </div>
    <div class = "empty"></div>
    <div class = "last">
        <div class = "btn">
            <div class = "btn-inner">
                first item item
            </div>
        </div>
        <div class = "btn">
            <div class = "btn-inner">
                second item item
            </div>
        </div>
    </div>
</div>

Возможный дубликат Как заставить flex-basis работать в IE11

— 30.05.2019 12:10

html css internet-explorer flexbox cross-browser

30.05.2019 11:59

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Попробуйте установить свойство min-width класса .container и изменить свойство flex-basis с 0 на «auto» для браузера IE.

Код, как показано ниже:

<style>
    .container {
        display: flex;
        background: #cccccc;
        width: 50%;
        min-width:300px;
    }

        .container > * {
            flex: 1 1 auto;
        }

    .first {
        background: #00ffff;
    }

    .last {
        background: #ff00ff;
        display: flex;
    }

    .btn {
        flex: 1 1 0%;
        display: flex;
        height: 30px;
    }

    .btn-inner {
        flex: 1 1 0px;
        background: rgba(0,0,0,0.2);
        display: flex;
    }

    _:-ms-fullscreen, :root .IE-FlexAuto {
        flex-basis: auto;
    }
    .inner-inner {
        flex: 1 1 auto;
    }
</style>

а также

<div class = "container">
    <div class = "first">
        <input type = "text" \>
    </div>
    <div class = "empty"></div>
    <div class = "last">
        <div class = "btn IE-FlexAuto">
            <div class = "btn-inner IE-FlexAuto">
                first item item
            </div>
        </div>
        <div class = "btn IE-FlexAuto">
            <div class = "btn-inner IE-FlexAuto">
                second item item
            </div>
        </div>
    </div>
</div>

Результат, как показано ниже: