React : make div take all available height

Question

I'm struggling to make my div take all available height.

Here's my sandbox: https://codesandbox.io/s/htstranslator-n3p04 The issue is when the search founds no cards.

I tried flex, flex-grow, etc and nothing worked.

Answer 1

Set it as: min-heigh: 100vh; it should take it

Edit:

So this is a little bit more complex than what it look based on your html structure, I would recommand css as follow:

body, #root, .content{
   min-height: 100vh;
}

Then where you are having <div class="h-100" make it like:

<div class="h-100 d-flex flex-column" style="min-height: 100vh;">

With all this setting it should like: