IE中的Flexbox宽度坏了

时间:2016-07-29 18:27:19

标签: html css flexbox

我有一个项目列表。每个列表项包含一个未知宽度的单选按钮和一个下拉列表,我想占用容器的其余宽度。我的代码适用于Chrome,但不适用于IE11。知道我做错了什么吗? 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>

我的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%;
}

Flexbox代码是使用此网站生成的:http://the-echoplex.net/flexyboxes/

感谢任何帮助!

修改

对不起,下拉列表的宽度完全缩小,而不是占用剩余的空间。

1 个答案:

答案 0 :(得分:1)

定义flex速记时,您已声明内容可以缩小,与flex-shrink: 1相同。你试过了吗?

.dropdown-selector{
    flex: auto;
}

我认为IE11在弹性速记方面也存在一些问题。您也可以尝试使用:

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

不幸的是,我没有使用Windows PC来测试IE,但是this是IE11 Flex错误的有用参考。