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

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%;
}