下拉菜单内容比下拉菜单更宽

问题描述：

我在React中创建了下拉菜单组件。我希望组件是可重用的，因此我希望它可以扩展它以填充所有容器的100％。我目前的问题是，我的下拉按钮和我的下拉内容都有100％的宽度。下拉按钮扩展为填充其容器的宽度，但下拉内容扩展得更多，因为它的位置是绝对的。下拉菜单内容比下拉菜单更宽

如何使下拉内容与下拉按钮的宽度相同？

我在codesandbox上创建了一个例子。

答

其因在下拉菜单中有position:absolute，并获取具有position:relative最接近父的宽度。试试这个：

.dropdown { 
    position: relative; 
}