不能包含使用 flexgrid Tailwind CSS 的视频

Question

我在flexgrid中包含视频元素时遇到困难。我只是想组织我的页面，让导航栏位于屏幕顶部，下面播放背景视频，填满屏幕的其余部分。目前，我可以将导航栏集中在视频上，但视频会导致向下滚动功能。当我用一个简单的文本对象替换视频时，一切似乎都很好。

// Navbar is a component
<div className='flex flex-col min-h-screen min-w-full'>
<div><Navbar/></div>
<div className='flex-1'> // Should expand the remainder of the screen height
<video src="videos/Demo-Video.mp4"
autoPlay  
loop
muted
className='object-cover' // Is supposed to shrink or expand the video the length of the parent div
>Your browser does not support the video tag.</video>
</div>
</div>

Answer 1

未测试，但删除视频包装的div可能会有所帮助，或者缩放视频以适应该div。

// Navbar is a component
<div className='flex flex-col min-h-screen min-w-full'>
<div><Navbar/></div>
//<div className=''> // Should expand the remainder of the screen height
<video src="videos/Demo-Video.mp4"
autoPlay  
loop
muted
className='flex-1 object-cover' // Is supposed to shrink or expand the video the length of the parent div
>Your browser does not support the video tag.</video>
//</div>
</div>