Alternative way for IE9 to support css3 flex

Question

I have this Navigation bar with dynamic items. In ul.breadCrumbs , item numbers may vary. The rule will be the second last li would be at maximum 30% of the ul.breadCrumbs , and the last li should take the remaining space. It is working using flex in Chrome and firefox, but not in IE 9. Is there an aternative way of fulfilling the rule for IE 9?

Thanks

<ul class="nav">
    <li>Some stuff..</li>
    <li>
        <ul class="breadCrumbs">
            <li>AAAAAAAA</li>
            <li>BBBBBBBB</li>
            <li>CCCCCCCCCC</li>
            <li>DDDDDDDDDD</li>
        </ul>


    </li>
</ul>

ul.nav > li:first-child{
    float:right;
}

ul.breadCrumbs{
    display:flex;  


}
ul.breadCrumbs > li:last-child{
    flex:1;  
}

ul.breadcrumbs > li:nth-last-child(2){
    max-width:30%;
}

Answer 1

Here's a list of polyfills for various HTML5 and CSS3 features.

Flexie by Richard Herrera

Flexibility - Flexbox for IE 8/9 (requires special prefixed CSS)

Answer 2

Flex layout does not support IE9. If you have to use flex in IE9, you can use a compatible library "flex-native" which can be found on NPM