如何设置react-select组件的高度为100%以适配父容器动态高度？

失效原因与解决方案 #

百分比高度配置失效有两个核心原因：

1. 只配置了Select内部control节点的高度，没有给Select组件本身的根DOM节点设置高度，百分比高度缺少可继承的基准值
2. react-select的control节点默认带有minHeight内置样式限制，会拦截自定义高度配置

可用代码示例 #

<Select           
    options={options} 
    // 给Select组件根节点设置100%高度，继承父容器的动态高度
    style={{ height: '100%' }}
    styles={{
    control: base => ({
        ...base,
        height: '100%',
        // 覆盖默认的minHeight限制
        minHeight: 'unset',
      })
    }}
 />

其他适配场景 #

• 若父容器为Flex布局，可将根节点样式替换为style={{ flex: 1 }}，即可自动占满父容器剩余高度，control的配置保持不变即可
• 若使用全局样式/CSS Modules管理样式，也可通过类名配置实现：
  1. 给组件指定自定义类名：<Select className="full-height-select" />
  2. 编写对应样式：

  .full-height-select {
    height: 100%;
  }
  .full-height-select .react-select__control {
    height: 100%;
    min-height: unset;
  }
  

注：请确认你的父div高度不是auto（即不是靠内部内容撑开的高度），如果父容器高度为明确的动态计算值（如vh单位、Flex分配高度、JS动态设置值），以上配置均可正常生效。

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