드롭 다운의 컨텐츠가 드롭 다운보다 넓습니다

Question

저는 React에서 드롭 다운 구성 요소를 만들었습니다. 구성 요소를 재사용 할 수 있기를 원합니다. 그 이유 때문에 컨테이너에 들어갈 컨테이너의 100 %를 채우기 위해 컨테이너를 확장하고 싶습니다. 현재 내 문제는 내 드롭 다운 버튼과 내 드롭 다운 콘텐츠의 너비가 모두 100 %라는 것입니다. 드롭 다운 버튼은 컨테이너의 너비를 채우기 위해 확장되지만 위치가 절대적이므로 드롭 다운 콘텐츠는 훨씬 더 확장됩니다.

드롭 다운 콘텐츠를 드롭 다운 버튼과 같은 너비로 만들려면 어떻게해야합니까?

나는 codesandbox에 예제를 만들었습니다.

직접 링크 : 편집자에게 https://p34wl136rj.codesandbox.io/

링크 : 드롭 다운 메뉴는 position:absolute을 가지고 있으며,이 position:relative을 가지고 가장 가까운 부모의 폭을 얻을 수 https://codesandbox.io/s/p34wl136rj

Answer 1

그 때문이다. 시험해보기 :

.dropdown { 
    position: relative; 
}