如何让Tailwind尊重max-height设置？Radix UI Select组件问题

问题原因 #

Radix UI的SelectContent组件内部包含一个名为SelectViewport的子容器，下拉列表的滚动和高度限制实际上是由这个Viewport元素控制的。你直接给SelectContent设置max-h-[200pt]，样式并没有作用到真正控制高度的Viewport上，所以无法生效。而h-[200pt]（固定高度）和min-h-[80pt]（最小高度）能生效，是因为这两个属性会直接改变SelectContent容器的高度，进而影响内部Viewport的显示范围。

解决方法 #

方法1：直接给SelectViewport设置样式 #

利用Radix提供的SelectViewport组件，直接给它添加高度限制类：

<SelectContent key={itemKey} className="select-content bg-search-panel-element">
  <SelectViewport className="max-h-[200pt] overflow-y-auto" />
  {/* 这里放置你的SelectItem选项 */}
</SelectContent>

方法2：通过CSS选择器定位内部Viewport #

修改你的自定义CSS类，用属性选择器定位Radix的Viewport元素，确保样式覆盖默认值：

.select-content {
  @apply p-1 my-3 w-36 rounded-md;
}

.select-content [data-radix-select-viewport] {
  @apply max-h-[200pt] overflow-y-auto;
}

这样就能让max-height正确作用到下拉列表的滚动区域，限制下拉框的最大高度。

内容的提问来源于stack exchange，提问作者Allprod