Why does the padding of an element in one cell affect another cell?

Question

I have a two column layout. Because flex layout isn't supported by all browsers we want to support, I used display: table and display: table-cell.

My current problem is that if I modify the top padding of #sidebar > div > div, the MAIN content is affected, but it shouldn't be. So there are two questions:

• Why is MAIN affected by a change of #sidebar > div > div's top padding?
• How can I achieve that it's not affected?

HTML

<div id="wrapper">
    <div id="sidebar">
        <div class="inner">
            <div>TEST</div>
            <div>TEST</div>
            <div>TEST</div>
            <div>TEST</div>
        </div>
    </div>
    <div id="content">
        <div class="inner">MAIN</div>
    </div>
</div>

CSS

body {
    background: #ecf0f1;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
*, *:before, *:after {
    box-sizing: border-box;
}
#wrapper {
    display: table;
}
#sidebar {
    display: table-cell;
    background: #2c3e50;
    color: #ecf0f1;
    width: 200px;
}
#content {
    display: table-cell;
    background: #ecf0f1;
    color: #2c3e50;
}
.inner {
    min-height: 100vh;
    padding: 0px 10px;
}
#sidebar > div > div {
    padding: 5px;
    padding-top: 50px;
    margin: 1px 0;
}

jsFiddle — just modify the padding there.

Answer 1

Because you didn't specify vertical-align:top; for the MAIN div.

#content {
    display: table-cell;
    background: #ecf0f1;
    color: #2c3e50;
    vertical-align:top;
}

jsFiddle example

The default vertical-alignment is baseline, which is what you had ended up seeing.