Why is there a break in flexbox boxes?

Question

css

In the example below, there is a break in the black color assigned to the HTML tag. In this case, the flexbox Body container has been assigned a white color and the background in this place should be white. Why is there this gap between the main block and the footer? How to fix?

Answer 1

Remove height: 100%; in html or body, or better yet, don't use it at all.