如何将<select>约束到其父div的宽度？

Question

我的网页<select>在<div>父级内有一个菜单.如果菜单包含一个非常宽的项目,它会溢出其父级的宽度(关闭时).我该如何截断呢？

我试过flex-shrink: 1但没有发生任何事.我正确使用它吗？我可以将它应用于<select>广泛的<option>吗？或者是其他东西？

Answer 1

您是否尝试过应用于max-width选择？也许100%？这是一支笔展示它.

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>