CODEWITHSUNDEEP
htmlcssflexbox
nerras
nerras

Reputation: 91

Flexbox width broken in IE

I have a list of items. Each list item contains a radio button of an unknown width and a dropdown list that I would like to take up the rest of the width of the container. My code works in Chrome, but not in IE11. Any idea what I'm doing wrong? HTML:

<ul>
    <li class="project-list">
         <div class="radio-selector">
               ...code for radio button...
         </div>
         <div class="dropdown-selector">
               <select class="dropdown">
                     ...options...
               </select>
         </div>
    </li>
</ul>

And my css:

li.project-list{
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}
.dropdown-selector {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
     flex: 1 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
}
.dropdown{
    width:100%;
}

The flexbox code was generated using this site: http://the-echoplex.net/flexyboxes/

Any help is appreciated!

edit

Ah sorry, the dropdown is completely shrunk in width instead of taking up the remaining space.

Upvotes: 0

Views: 1162

Answers (1)

Mantissa7
Mantissa7

Reputation: 1502

When defining the flex shorthand, you have declared that the content can shrink, the same as flex-shrink: 1. Have you tried:

.dropdown-selector{
    flex: auto;
}

I think IE11 also has some problems with the flex shorthand. You could also try using: 

.dropdown-selector{
    display: flex;
    flex-grow: 1;
    flex-shrink: 0;
}

I don't have a windows PC around to test IE on unfortunately, but this is a useful reference for IE11 Flex bugs.

Upvotes: 1

Related Questions