css: child items bigger than parent (100% not working as expected)

Question

I have this situation in which I'm using

height: 100%

on a parent, and in the parent I have this header which is 34px and a container which is 100% again. For some reason the container (ordered list) is bigger than the parent

Here is a jsfiddle

And here is the css

* {
   height: 100%;
   width: 100%;
   margin: 0;
   box-sizing: border-box;
}
section {
   padding: 10px 20px 20px 10px;
   border: 2px solid black;
}

header {
    height: 30px;
    background-color: blue;
}

ol {
    list-style-type: none;
    border: 1px dashed #d2d4d8;
    box-sizing: border-box;
    background-color: yellow;
    padding: 0;
}

li {
    display: inline-block;
    box-sizing: border-box;
    background-color: green;
    width: 30%;
    border: 1px solid blue;
    font-size: 0;
}

Any suggestions why the ordered list is outside the parent section element ?

Answer 1

It's setting the height of the ol to 100% of the parent height, not 100% of the parent minus the 30px for the header. I've gotten frustrated at this before, because in my head I want 100% to mean "Fill to the parent" but it means literally 100%. If you can do css3 stuff, you could change your css to this:

ol { height: calc(100% - 30px); }

You could also do some positioning stuff, but that always gets gross. Here is an untested idea of it:

section { position: relative; }
ol { position: absolute; top: 30px; bottom: 0; }

Answer 2

It doesn't help that your mixing percentages and fixed sizes with your padding. When you do that use box-sizing:border-box; so that the percentage based width and height will take into account the padding and margins and not just add them on the end.