**My Code**

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>

/*RESET BLOCK START ------------------------------------------------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* RESET CODE END --------------------------------------------------------------------------------- */

body
{
    display:flex
    ;background-color:#20262b;min-height:100vh;
}

.column
{
    display:flex;
    flex-direction:column;
    padding: 0;
    /* flex:1; */
}

/* .flexContainers{display:flex;} */
#body__
{

    background-color:#30364b;
    padding: 0;
}
#body___header
{
    /* display:flex; */
    background-color:#10561b;
}
#body___middleSection
{
    display:flex;
    flex:auto;
    background-color:#30363b;
}

#body___footer
{
    background-color:#10561b;
}

</style>
</head>
<body class="">
<div id="body__" class="column">
<div id="body___header" class="flexContainer"><span class="">This is Header of body</span></div>
<div id="body___middleSection" class="flexContainer"><span class="">This is cntnt of body</span></div>
<div id="body___footer" class="flexContainer"><span class="">This Footer of body</span></div>
</div>
</body>
</html>
```

This is my Layout

In the above code you can notice padding after "This Footer of body" content.

I don't understand where this padding is coming from.

Due to this padding the page is slightly vertical scroll-able ( at least in Firefox ), The page is not supposed to be scroll able unless there is extra content.

How can i fix this.

**EDIT**

Even if you run snippet here, you can notice its slightly scroll able (vertically) which is undesired behavior.

**EDIT 2**

Color of the slight space in the bottom is same as of **body tag**.
So i am assuming, its either **bottom padding of body** or **bottom margin of div with id body\_\_**