Patternfly-React NotificationDrawer窗口resize时子元素高度适配问题

我之前在开发Patternfly-React组件时也碰到过类似的抽屉子元素高度不跟随父容器自适应的问题，你用JS监听注入内联样式的方案在部分浏览器失效，大概率是不同浏览器对resize事件触发时机、内联样式优先级的处理存在差异。这里给你两个更可靠的替代方案：

方案一：使用Flexbox布局（推荐） #

Patternfly的drawer-pf本身基于Flexbox实现，我们可以利用这个特性让panel-body自动填充剩余空间，同时固定底部的操作按钮区域：

1. 给NotificationDrawer主容器添加Flex布局属性：

.notification-drawer-pf {
  display: flex;
  flex-direction: column;
  height: 100%; /* 确保容器占满父元素高度 */
}

2. 让panel-body区域自动填充剩余空间，并设置纵向滚动：

.notification-drawer-pf .panel-body {
  flex: 1;
  overflow-y: auto;
  max-height: unset; /* 移除之前JS设置的内联max-height */
}

3. 底部操作面板（含「已读/清除」按钮）固定高度，不参与弹性分配：

.notification-drawer-pf .notification-drawer-pf-footer {
  flex-shrink: 0;
}

这种纯CSS方案不需要依赖JS监听resize事件，兼容性覆盖所有支持Flexbox的现代浏览器，完全贴合Patternfly的设计规范。

方案二：优化JS监听方案（兼容更多浏览器） #

如果因业务限制必须使用JS方案，可以优化监听逻辑，提升跨浏览器兼容性：

1. 用ResizeObserver替代传统window.resize事件，它能精准监听元素尺寸变化，而非整个窗口：

const panelBody = document.querySelector('.notification-drawer-pf .panel-body');
const footer = document.querySelector('.notification-drawer-pf .notification-drawer-pf-footer');

const resizeObserver = new ResizeObserver(entries => {
  for (const entry of entries) {
    const drawerHeight = entry.contentRect.height;
    const footerHeight = footer.offsetHeight;
    // 计算panel-body最大高度：抽屉总高度 - 顶部标题栏高度 - 底部操作栏高度
    const maxHeight = drawerHeight - footerHeight - 60; // 60为标题栏预估高度，可根据实际调整
    panelBody.style.maxHeight = `${maxHeight}px`;
  }
});

// 监听抽屉容器的尺寸变化
resizeObserver.observe(document.querySelector('.notification-drawer-pf'));

2. 组件卸载时记得销毁ResizeObserver，避免内存泄漏：

// 在React组件的useEffect清理函数中
return () => {
  resizeObserver.disconnect();
};

ResizeObserver的兼容性优于传统resize事件，能覆盖Safari 13.1+等主流浏览器，解决你之前遇到的跨浏览器失效问题。

验证要点 #

无论用哪种方案，都要测试以下场景：

• 窗口从大到小、从小到大的尺寸调整
• 多浏览器（Chrome、Firefox、Safari、Edge）适配情况
• 通知内容过多时的滚动流畅度
• 底部操作按钮始终保持可见

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