I am trying to create a header, below is my implementation of it, I used calc to subtract the height preserved for the header:

<div className='flex flex-col h-full'>
            <Header/> //takes 68px of height
            <div className='absolute h-[calc(100%-68px)] top-[68px] w-full flex'>
                <div className='h-full flex-1' style={{backgroundColor: 'rgb(241 245 249)'}} ref={containerRef}>
                    <canvas ref={canvasRef}/>
                </div>
            </div>
        </div>

When inspecting, I see the outer div taking full height of the screen while the div that has h-[calc(100%-68px)] has height of 150px which I don’t know where it is from. When I hover on it, it does have the explanation of a typical tailwind class:

.h-[calc(100%-68px)] {    
 height: calc(100% - 68px); 
}

Also, here is my Header component:

const Header = () => {
    return (
        <div className='w-full h-[68px] bg-black absolute z-50'>
            Header
        </div>
    );
};

Using h-full does work, but it is not my intention because the header takes 68px, if I use h-full, it will overflow which I don’t want.