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

Question

我的网页上有＆lt; select＆gt; ＆lt; div＆gt;中的菜单家长。如果菜单包含一个非常宽的项目，它会溢出其父级的宽度（关闭时）。我该如何截断呢？ 我尝试了flex-shrink：1但没有发生任何事情。我正确使用它吗？我是否将它应用于＆lt; select＆gt;或广泛＆lt;选项＆gt;？或者是其他东西？

Answer 1

您是否尝试过将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>

Answer 2

我使用的是柔性显示，但flex-shrink: 1本身并不起作用，但是当我添加width: 100%时它才有效。不知道为什么会产生影响，但事实确实如此。