<select>を親divの幅に制限するにはどうすればよいですか？

Question

私のウェブページは親の中に<select>のメニューを持っています。メニューに非常に幅の広い項目が含まれている場合、親の幅がオーバーフローします（閉じたとき）。代わりにどのように切り詰めるのですか？

flex-shrink: 1を試しましたが、何も起こりませんでした。私はそれを正しく使用していますか？私はそれを<select>または幅広い<option>に適用しますか？または、他の何か？

Answer 1

私は動作しませんでしたフレックスディスプレイが、それ自体でflex-shrink: 1を使用していますが、私はwidth: 100%を追加したときにそれが働きました。なぜそれが違いを生み出したのか分かりませんが、それはありました。

Answer 2

max-widthを選択に適用しましたか？おそらく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>