dropdown内容比dropdown更宽

Question

我在React中创建了一个dropdown组件。我希望组件是可重用的，并且出于这个原因，我希望它能够扩展它，以100%填充它放入的任何容器。我目前的问题是，我的下拉按钮和我的下拉内容都有100%的宽度。dropdown按钮扩展到填充其容器的宽度，但是dropdown内容扩展得更多，因为它的位置是绝对的。

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

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

直接链接：https://p34wl136rj.codesandbox.io/

编辑器链接：https://codesandbox.io/s/p34wl136rj

Answer 1

这是因为下拉菜单具有position:absolute，并且它获取具有position:relative的最近父对象的宽度。试试这个：

.dropdown {
   position: relative;
}