How to make a div fill its parent div completely in React?-CodePudding

I am trying to create a react app using create-react-app. Following is my app function which is supposed to render a component thread inside my main app.

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <div style={{ width: "280px", height: "320px", borderWidth:"5",borderColor:"white" }}>
          <Thread threadId={"my-thread-id"} />
        </div>
      </header>
    </div>
  );
}

and here is the thread component

function Thread() {
  return (
    <div className="thread">
        <h1 className="text-3xl font-bold underline ">Hello world!</h1>
    </div>
  );
}

export default Thread;

I just want my thread component's div with class "thread" to fill entire height and width inside the div of 280px:320px w:h in the main app. I am only getting a height of ~70px now.

I'm trying to change height, width, minHeight, minWidth parameters in the header class but to no avail. I am very bad at CSS so I would really appreciate the help. Thanks!

CodePudding user response：

In order to achieve this you need to give the element with thread a class of h-full (height:100%) to fill the height of the container (which has a height of 320px).

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <div style={{ width: "280px", height: "320px", borderWidth:"5",borderColor:"white" }}>
          <Thread threadId={"my-thread-id"} />
        </div>
      </header>
    </div>
  );
}

function Thread() {
  return (
    <div className="thread h-full">
        <h1 className="text-3xl font-bold underline">Hello world!</h1>
    </div>
  );
}


const rootElement = document.getElementById("app");
ReactDOM.render(<App />, rootElement);

<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>

CodePudding user response：

give a class to Thread Component and style it

React:

<Thread className="t" />

CSS:

.t {
postion: absolute;
width: 100%;
height: 100%;
}