Flex-Grow Div With Video Tag Growing To Include Header Size When 'DOCTYPE Html' Included August 19, 2022 Post a Comment I am using Chrome 81, latest. I am including a inside a container which is set to flex-grow: 1. The idea is there is a header, and the bottom of the page Solution 1: In the case somebody else runs into this problem in the future, the only way I have been able to get the <video> tag to size the way I want is by using a <table> for the cells to vertically size. The video tag goes right along with it (see code below). It feels like flex-grow should work, but I can't seem to get it to work with <video>. If you can demonstrate how to get it to work, please do. Thanks! <!DOCTYPE html> <html> <body style="margin: 0"> <table style="height: 100vh; min-height: 100vh; max-height: 100vh; width: 100%; border-spacing: 0"> <tr style="height: 100px; background-color: red"> <td style="padding: 0"></td> </tr> <tr> <td style="padding: 0"> <div style="position: relative; height: 100%"> <video src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4" style="position: absolute; width: 100%; height: 100%; background-color: black" controls></video> </div> </td> </tr> </table> </body> </html> Copy Share You may like these postsWhich Doctype Declaration Should We Use?Need Help With: Jquery Prepend Doctype To HtmlJavascript Image Scroller Not Working With DoctypeHtml Doctype For Includes (visual Studio Or Html Generic) Post a Comment for "Flex-Grow Div With Video Tag Growing To Include Header Size When 'DOCTYPE Html' Included"
Post a Comment for "Flex-Grow Div With Video Tag Growing To Include Header Size When 'DOCTYPE Html' Included"