Tengo un contenedor <div> que se completará con algunas etiquetas a medida que el usuario seleccione opciones en un menú desplegable. Si las etiquetas llenan el espacio que designé para el contenedor, quiero mostrar una etiqueta "+N" con el número restante de opciones seleccionadas.

Salida esperada: la condición isOverflowing se establece en true .

Salida real: isOverflowing nunca se establece en true .

CÓDIGO

 const [selectedOptions, setSelectedOptions] = useState<number[]>([]); const [overflowing, setOverflowing] = useState(false); const tagsRef = useRef<HTMLDivElement>(null); const isOverflowing = (element: any) => { return element.current?.scrollHeight > element.current?.clientHeight; // NEVER RETURNS TRUE }; useLayoutEffect(() => { if (isOverflowing(tagsRef)) { setOverflowing(true); } else { setOverflowing(false); } }, [tagsRef, selectedOptions]); ... return ( <TagsWrapper ref={tagsRef} className="tagsWrapper"> {selectedOptions.map((option, index) => ( ... ))} </TagsWrapper> )

CSS

 .tagsWrapper { display: flex; flex-flow: row wrap; max-height: 32px; max-width: calc(100% - 50px - 16px - 4px); overflow: hidden; }

El registro de la consola tagsRef siempre muestra que scrollHeight y clientHeight son iguales, cuando en realidad no lo son (puedo ver que el div es más alto cuando lo inspecciono en el navegador).

He probado muchas combinaciones de max-height , height ... sin éxito. Si la propiedad de overflow está configurada como visible , obviamente funciona, pero no quiero mostrar las etiquetas restantes... ¿Hay alguna solución que no veo?

¡Gracias!