IE Flexbox doesnt respect child flexbox size

Question

We have parent flexbox with flex-basis: auto; Inside of last parent container we have some count of flexboxes with flex-basis: 0; The issue is that last parent container behaves like he is empty. That happens only in IE(11).

Please, share some hack to fix it.

Fiddler: https://fiddle.sencha.com/#view/editor&fiddle/2slv

Here is text example:

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

IE11 doesnt respect second level div content width when calculate top level div`s width.

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

Possible duplicate of [How to make flex-basis work in IE11](https://stackoverflow.com/questions/46368886/how-to-make-flex-basis-work-in-ie11) — Morpheus, May 30 '19 at 10:10

score 0 · Accepted Answer · answered May 30 '19 at 13:04

Try to set the min-width property of the .container class, and change the flex-basis property from 0 to "auto" for the IE browser.

Code as below:

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

and

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

The result as below:

"the flex-basis property from 0 to "auto" for the IE browser." change design that is not good, but seems that this is the only solution. — Иван Колосинский, Jun 17 '19 at 07:20

IE Flexbox doesnt respect child flexbox size

1 Answers1