Filling the height in Tabs react-bootstrap

Question

I am using React Bootstrap. I have got a full screen Modal and in its body it has got a and . I one of these Tabs I want to create a Lexical Editor, the editor should fill the 100% of the width and the height of modal body (with some margin).

This is my simplified code:

From the tabs

<Tabs defaultActiveKey="description" className="mt-3">
    <Tab className="text-center m-5 h-100" eventKey="description" title={t("exposition.description")}>
                <TextEditor t={t} />
     </Tab>
</Tabs>

From the text editor

<LexicalComposer initialConfig={initialConfig} className="h-100">
            <RichTextPlugin
                contentEditable={<ContentEditable className="h-100" />}
                placeholder={
                    <div className="h-100">{t("editor.placeholder")}</div>
                }
                ErrorBoundary={LexicalErrorBoundary}
            />
</LexicalComposer>

The full code

As you can see, I tried to put everything with h-100. But it didn't work. Then I tried adding some CSS3 on the .tab-pane and .tab-content but the correct percentage for the height varies depending on the device, so it's not responsive. I also tried the solution from this question

Answer 1

I first tried with this CSS class but it didn't work:

.tab-content {
    height: calc(100% - 6rem);
}

Looks like I had an h-100 in the placeholder so, I had two h-100. What means that I was using the 200% of the height, what caused page overflow.

I expect that this Q&A will be useful for someone.