PlasmoCSUI中h-full无法填充父节点问题求助

我正在开发浏览器插件，需要在X.com（原Twitter）的横向按钮列表末尾注入自定义按钮，目标是让这个按钮和原有按钮保持相同高度。但尝试使用h-full类让元素填充父节点时没有效果，相关代码和问题截图如下：

import cssText from "data-text:~style.css"
import type { PlasmoCSConfig, PlasmoGetInlineAnchorList } from "plasmo"

export const getStyle = () => {
    const style = document.createElement("style")
    style.textContent = cssText.replaceAll(":root", ":host")
    return style
}
export const config: PlasmoCSConfig = {
    matches: ["*://*.x.com/*", "*://*.twitter.com/*"]
}

export const getInlineAnchorList: PlasmoGetInlineAnchorList = async () => {
    const elements = document.querySelectorAll('[role="tablist"]:last-child')
    return Array.from(elements).map((el) => ({
        element: el,
        insertPosition: "beforeend"
    }))
}

const PlasmoCSUI = () => {
    return (
        <div className="my-auto flex items-center justify-center" style={{ height: 'var(--twitter-tab-height)' }}>
            <div className="my-auto w-9 h-full flex items-center justify-center ml-1 bg-red-500">
                tag
            </div>
        </div>
    )
}

export default PlasmoCSUI

• 截图1：原有按钮列表的布局状态
  
• 截图2：自定义按钮高度未填充的显示效果
  
• 截图3：元素的DOM结构与样式检查结果
  

有没有人遇到过类似问题？该如何解决？

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