如何限制<select>的父div的寬度？

Question

我的網頁在<div>家長中有一個<select>菜單。如果菜單包含非常寬的項目，則會溢出其父寬度（關閉時）。我如何截斷它呢？

我試過flex-shrink: 1但什麼也沒有發生。我是否正確使用它？我是否將它應用於<select>或廣泛的<option>？或者是其他東西？

Answer 1

我使用的柔性顯示器，但flex-shrink: 1本身沒有工作，但它的工作，當我加入width: 100%。不知道爲什麼這有所作爲，但它確實如此。

Answer 2

您是否嘗試過將max-width應用於select？也許是100％？這裏是a pen展示它。

而且通過John Weisz提供它的另一個例子：

div { 
 
    width: 300px; 
 
} 
 

 
select { 
 
    max-width: 100%; 
 
}

<div> 
 
    <select> 
 
     <option>My webpage has a select menu within a div parent. If the menu contains a very wide item, it overflows its parent's width (when closed). How do I truncate it instead?</option> 
 
     <option>Option 2</option> 
 
     <option>Option 3</option> 
 
    </select> 
 
<div>