100% высота блока в React

С помощью npm установил React. Из "коробки" существует файл App.js. Сделал разметку:

import React from 'react'; 
import './App.css'; 
import Header from './components/header/Header.js' 
import Main from './components/main/Main.js' 
 
const App = () => { 
  return (  
    <div className = "App" > 
      <Header / > 
      <Main / > 
    </div> 
  ); 
} 
 
export default App;

header у меня фиксированной высоты в 80px. А вот main надо растянуть на всю оставшуюся высоту.

Пробовал решить с помощью гридов:

display: grid;
grid-template-rows: 80px 1fr;

Пробовал с помощью флексов. По дефолту в align-items = stetch. Думал, растянется, но нет. Задавал App'у высоту в 100%. Но ничего не работает. Есть варианты?