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

Question

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!

Answer 1

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>

Answer 2

give a class to Thread Component and style it

React:

<Thread className="t" />

CSS:

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