I noticed a behavior difference between default display type and flexbox, and I don't understand what is causing it. Here's a minimal example code I came up with:
body { margin: 0; width: 100vw; height: 100vh;}video { width: 100%; height: 100%;}<video controls></video>In this example the video seems to be slightly higher than the screen - the vertical scrollbar is visible and it's possible to scroll for a small amount.
Adding display: flex to body changes this. Now the video perfectly fills the screen and there's no scrollbars.
So. Why does this happen?
- Why does flexbox make the scrollbars disappear
- Why are there even scrollbars in the first place?
Some more details, in the order of decreasing probable importance:
I thought that this behavior is related to box-sizing, but that's probably not it: replacing video with bordered div also causes the scrollbars to appear (as expected), but then flexbox does not make them disappear. Also, adding box-sizing: border-box to video does not make scrollbars disappear.
If viewed in the debugger, there doesn't seem to be any actual size difference in any elements between the flexbox and no-flexbox cases. It seems to be purely visual (at least in firefox)
flex-direction does not matter - both row and column make scrollbars disappear.
As far as I can tell, this behavior is not specific to video. In fact, I first encountered it in some other case. I could't reproduce that in a simple way though, so video it is. Video controls are not necessary to reproduce the behavior, but they make it easier to see.
Checked in firefox and chromium - reproduces in both.