在IE中損壞的摺疊箱寬度

我有一個項目列表。每個列表項目都包含一個寬度未知的單選按鈕和一個下拉列表，我希望佔用容器的其餘寬度。我的代碼適用於Chrome，但不適用於IE11。任何想法我做錯了什麼？ HTML：在IE中損壞的摺疊箱寬度

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

任何幫助表示讚賞！

編輯

不好意思啊，下拉完全寬度，而不是佔用了剩餘的空間縮小。

來源

2016-07-29 nerras

IE中「不起作用」的症狀是什麼？ – Alec

對不起，下拉寬度完全縮小而不佔用剩餘空間。或者是全寬而不與其他元素內聯。 – nerras

您發佈的代碼似乎沒有重現該問題。考慮發佈一個完整的例子和演示（例如jsfiddle.net）.. http://stackoverflow.com/help/mcve –

定義伸縮速記時，您聲明內容可以縮小，與flex-shrink: 1相同。你有沒有嘗試過：

.dropdown-selector{ 
    flex: auto; 
}

我覺得IE11也有一些Flex的速記問題。你也可以嘗試使用：

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

我沒有一臺Windows PC各地測試IE上的不幸，但this是IE11 Flex的錯誤了有益的參考。

來源

2016-07-29 18:45:54

我試過這兩種解決方案，似乎都不適用於我：/ – nerras

在IE中損壞的摺疊箱寬度

回答

相關問題