Как заставить родительский div реагировать на ширину дочернего div с абсолютным позиционированием

Question

CodeSandbox
Я создал кастомный select компонент и его выпадающего списка задано position: absolute из за этого он не влияет на размер родительского контейнера, это меня не устраивает, я хочу сделать так чтобы родительский элемент был такой же ширины как и выпадающий список, но при этом не задавая какую-либо фиксированную ширину.

Скриншоты:

Answer 1

Абсолютно позиционированные элементы и не могут влиять на размеры своих родительских, они как-бы выпадают из обычного потока документа.

Можно обновлять размеры родительского элемента при помощи JS. В вашем примере на React это можно сделать так:

const Select = () => {
  const select = useRef(null);
  const options = useRef(null);

  useEffect(() => {
    const { width } = options.current.getBoundingClientRect();
    select.current.style.width = `${width}px`;
  });

  return (
    <div className={"select"} ref={select}>
      <div className={classnames("control", "activeControl")}>
        <div className={"title"}>Option 1</div>
      </div>

      <ul className={"options"} ref={options}>
        <li className={classnames("option", "activeOption")}>Option 1</li>
        <li className={classnames("option", "activeOption")}>
          Optioooooooon 2
        </li>
        <li className={classnames("option", "activeOption")}>
          Optioooooooooooooooooooon 3
        </li>
      </ul>
    </div>
  );
};

Переданный в useEffect коллбек вызывается при каждом обновлении компонента и устанавливает ширину select в соответствии с шириной options.

БЛОГ НА HUSL

Как заставить родительский div реагировать на ширину дочернего div с абсолютным позиционированием

Ответы (1 шт):