I have a <div> container that will be populated with some tags as the user selects options on a dropdown. If the tags fill the space I designated for the container, I want to display a "+N" tag with the remaining number of selected options.

Expected output: the isOverflowing condition sets to true.

Actual output: isOverflowing is never set to true.

CODE

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;
}

Console logging the tagsRef always shows that scrollHeight and clientHeight are the same, when in fact they are not (I can see that the div is taller when I inspect it on the browser).

I've tried many combinations of max-height, height... to no avail. If the overflow property is set to visible it works, obviously, but I don't want to show the remaining tags... Is there a solution I'm not seeing?

Thanks!