我有一个 <div> 容器，当用户在下拉列表中选择选项时，该容器将填充一些标签。如果标签填满了我为容器指定的空间，我想显示一个带有剩余选定选项数量的“+N”标签。

预期输出：isOverflowing 条件设置为 true。

实际输出：isOverflowing 永远不会设置为 true。

代码

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

控制台记录 tagsRef 总是显示 scrollHeight 和 clientHeight 是相同的，而实际上它们不是（当我在浏览器上检查时，我可以看到 div 更高）。

我尝试了许多 max-height、height... 的组合，但均无济于事。如果 overflow 属性设置为 visible 它显然可以工作，但我不想显示剩余的标签......有没有我没有看到的解决方案？

谢谢！

<TagsContainer>
  <TagsWrapper ref={tagsRef} className="tagsWrapper">
    {selectedOptions.map((option, index) => (
      ...
    ))}
  </TagsWrapper>
</TagsContainer>

.tagsContainer {
  max-height: 32px;
  overflow: hidden;
}
.tagsWrapper {
  display: flex;
  flex-flow: row wrap;
  ...
}