react-bootstrap Accordion Body垂直滚动条无法点击问题求助

我使用react-bootstrap的Accordion组件，其中一个折叠项包含一个有时会很长的列表。我为其添加了overflowY: auto样式以在内容过长时显示滚动条，但滚动条虽已出现却无法点击（仅能通过鼠标滚轮滚动）。

相关代码如下：

<div style={{ paddingTop: "1.7rem" }}>
        <table className="columnTable">
            <tbody>
                <tr>
                    {/* 其他行省略 */}
                    <td className="header">Context Information</td>
                </tr>
                <tr>
                    <td>
                        <Accordion defaultActiveKey={open.current} flush alwaysOpen>
                            {someList.filter(a => a.shouldbeIncluded == 'true').map((asset, i) => (
                                <Accordion.Item style={{ cursor: pointer, overflow: 'auto' }} eventKey={i.toString()} key={itemUri} onClick={e => HandleAccordionEvent(e, nameFromElsewhere)}>
                                    <Accordion.Header>{myPropertyName}</Accordion.Header>
                                    <Accordion.Body className="bodyText ellipses" style={{ overflowY: 'auto', maxWidth: 200, maxHeight: 200, textOverflow: 'ellipsis', padding: 10 }}>
                                        {myItemList.filter(a => a.filter == "criteria").map((a, j) => (
                                            <>
                                                <a href="randomUrl">{a.someRandomText}</a>
                                                <br/>
                                            </>
                                        ))}
                                    </Accordion.Body>
                                </Accordion.Item>
                            ))}
                        </Accordion>
                    </td>
                </tr>

                {/* 其他行 */}
            </tbody>
        </table>

自定义CSS：

.accordion-button.collapsed {
  background-color: rgb(53, 132, 181) !important;
  color: white;
}

.accordion-button {
  font-size: medium;
  padding: 10px;
  background-color: rgb(0, 165, 203) !important;
  color: white !important;
}

.header {
  background-color: rgb(33, 90, 161);
  color: white;
  padding: 10px;
}

.bodyText {
  font-size: 15px;
  text-align: left;
}

.ellipses {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 200px;
}

.columnTable {
  border-width: 1px;
  border-color: lightgray;
  border-style: solid;
  position: 'absolute';
  top: 0;
  width: 200px;
  display: 'inline-block';
  padding-top: "1.7rem"
}

• 样式冲突：.ellipses类中的overflow: hidden会覆盖Accordion.Body设置的overflowY: auto，同时white-space: nowrap强制文本不换行，导致纵向滚动逻辑失效，滚动条仅能通过滚轮交互，无法点击拖拽。
• 事件冒泡拦截：Accordion.Item绑定了onClick事件，点击滚动条时会触发该父元素的点击事件，导致滚动条的原生交互被拦截。
• CSS语法错误：columnTable中的属性值使用了单引号（如position: 'absolute'），这在CSS中是无效的，可能导致表格布局异常，压缩滚动条的可点击区域。

1. 修正.ellipses类样式
   移除冲突属性，将文本溢出逻辑移到列表单项上：

   .ellipses {
     text-overflow: ellipsis;
     max-width: 200px;
   }
   /* 给列表单项添加省略号样式 */
   .ellipses a {
     display: block;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   

2. 调整Accordion.Body样式
   移除不兼容的text-overflow属性，确保纵向滚动生效：

   <Accordion.Body className="bodyText ellipses" style={{ overflowY: 'auto', maxWidth: 200, maxHeight: 200, padding: 10 }}>
     {/* 列表内容 */}
   </Accordion.Body>
   

3. 阻止事件冒泡
   在Accordion.Body上添加点击事件，阻止事件冒泡到Accordion.Item：

   <Accordion.Body 
     className="bodyText ellipses" 
     style={{ overflowY: 'auto', maxWidth: 200, maxHeight: 200, padding: 10 }}
     onClick={(e) => e.stopPropagation()}
   >
     {/* 列表内容 */}
   </Accordion.Body>
   

4. 修复columnTable的CSS语法错误
   移除属性值的单引号：

   .columnTable {
     border-width: 1px;
     border-color: lightgray;
     border-style: solid;
     position: absolute;
     top: 0;
     width: 200px;
     display: inline-block;
     padding-top: 1.7rem;
   }
   

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