IE中的Flexbox宽度已损坏 [英] Flexbox width broken in IE
问题描述
我有一个物品清单.每个列表项都包含一个宽度未知的单选按钮和一个下拉列表,我想占用其余的容器宽度.我的代码可在Chrome中运行,但不能在IE11中运行.知道我在做什么错吗? HTML:
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>
还有我的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/
The flexbox code was generated using this site: http://the-echoplex.net/flexyboxes/
感谢您的帮助!
修改
抱歉,下拉列表的宽度已完全缩小,而不是占用了剩余空间.
Ah sorry, the dropdown is completely shrunk in width instead of taking up the remaining space.
推荐答案
定义flex速记时,您已声明内容可以收缩,与flex-shrink: 1
相同.您是否尝试过:
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;
}
我认为IE11在flex速记上也存在一些问题.您也可以尝试使用:
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;
}
不幸的是,我没有Windows PC来测试IE,但是这非常有用IE11 Flex错误的参考.
I don't have a windows PC around to test IE on unfortunately, but this is a useful reference for IE11 Flex bugs.
这篇关于IE中的Flexbox宽度已损坏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!