React Bootstrap Tabs中实现Lexical编辑器自适应模态框高度

要让Lexical编辑器在全屏Modal的Tab中填充满（带少量边距），核心是解决层级容器的高度传递问题，Bootstrap的Tabs组件默认样式不会自动占满父容器高度，结合flex布局可以更优雅地实现响应式填充：

1. 调整Modal和Tabs的布局结构 #

把Modal.Body改为flex布局，让Tabs自动填充剩余空间，同时调整Tab的内边距来实现需求的少量边距：

<Modal fullscreen show={show} onHide={handleClose}>
  <Modal.Header closeButton>
    <Modal.Title>{t("modal.title")}</Modal.Title>
  </Modal.Header>
  <Modal.Body className="d-flex flex-column p-0">
    <Tabs 
      defaultActiveKey="description" 
      className="flex-grow-1 d-flex flex-column"
    >
      <Tab 
        eventKey="description" 
        title={t("exposition.description")}
        className="flex-grow-1 d-flex flex-column p-4"
      >
        <TextEditor t={t} />
      </Tab>
    </Tabs>
  </Modal.Body>
</Modal>

• d-flex flex-column：让容器内的元素垂直排列，子元素可以通过flex-grow-1填充剩余空间
• 去掉Modal.Body的默认padding，改为在Tab内部加p-4，避免边距挤压高度

2. 自定义CSS覆盖Tabs默认样式 #

Bootstrap的.tab-content和.tab-pane默认是自适应内容高度，需要强制它们占满父容器：

/* 让tab-content填充父容器剩余高度 */
.tab-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

/* 激活的tab-pane必须填充tab-content的高度 */
.tab-content .tab-pane.active {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

3. 调整Lexical编辑器的内部布局 #

让Lexical的容器和可编辑区域填充Tab的剩余空间：

<LexicalComposer initialConfig={initialConfig} className="flex-grow-1 d-flex flex-column">
  <RichTextPlugin
    contentEditable={<ContentEditable className="flex-grow-1" />}
    placeholder={
      <div className="h-100 d-flex align-items-center text-muted">
        {t("editor.placeholder")}
      </div>
    }
    ErrorBoundary={LexicalErrorBoundary}
  />
  {/* 如果有工具栏，可固定在顶部，避免被内容挤压 */}
  <ToolbarPlugin />
</LexicalComposer>

为什么之前的h-100不生效？ #

百分比高度（h-100对应height: 100%）要求每一层父元素都必须设置明确的高度，但Bootstrap Tabs的内部组件（.tab-content、.tab-pane）默认没有设置高度，导致高度无法传递到Lexical编辑器。而flex布局的flex-grow-1可以让子元素自动填充父容器的剩余空间，不需要依赖层层设置百分比，更适合响应式场景。

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